vue里怎么点击button获取input的值

可以用下面的方法：

1 在input中使用vue的“v-model”属性，这样可以实现数据双向绑定，点击按钮的时候可以直接获取数据当中input的值。

2 可以给input添加ref属性，这样可以使用“this$ref”访问到input元素，直接取value值就可以了。

3 可以添加id等属性，使用原生js方法获取input的值。

你可以在循环的时候  给当前的循环 dom 添加 事件  事件回调函数里面的参数 加入$event

比如：

    <li v-for="item in list" @click="clickEvent($event)">{{itemname}}</li>

</ul>export default {

    data () {

      return {

        list:[{name: 'aaa'}, {name: 'bbb'}]

        }

  },

  methods: {

      clickEvent(e){

          // etarget就是你当前点击的dom元素 

      }

  }  

}

<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>

<script>

// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了

Vue$refs['video']play();

</script>

Vuejs官方 ：有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

>

通常情况下，我们可能会用v-for循环出一堆checkbox，提交数据的时候需要去获取选中的checkbox的value值，之前我的获取方式是给checkbox添加点击事件，这样确实能解决问题，但是总觉得有更好的办法，因为同为form表单元素的文本框就可以使用v-model来实现数据双向绑定，难道checkbox不能实现数据双向绑定吗？

呵呵哒，真的可以，我一直都不知道。。。。。。。。。

<input  type="checkbox"  v-model="checkFlag">

data () {

    return {

            checkFlag: true    //checkbox默认选中

    }

}

上面是最简单的用法，那如果使用场景是：购物车里循环遍历了所有用户添加的商品，用户选中一些商品，去结算，我们需要在结算的时候获取所有选中的checkbox的value值；

页面的大概效果如下：

这里我们给checkbox绑上了v-model的属性，以及value属性，checkedArr是一个数组，用来放选中的itemname，当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化；

强调最重要的一点，v-model会在checkbox选中的时候，自动将当前的value值push进数组；在取消checkbox的时候，自动将当前的value值pop出数组。

以下是依次选中四个商品，然后取消商品4，打印的checkedArr的值

至于全选按钮什么时候选中，那我们可以watch一下checkedArr：

现在没用过vue框架，都不好意思说自己是干前端呢，当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度，现在连小程序都推出了mpvue，你确定你还不赶紧了解了解vue吗，我这篇文章的内容都是些很基础的vue知识，后续会补上

解析 ： 

-  beforecreate ：可以在这加个loading事件 

- created  ：在这结束loading，还做一些初始化，实现函数自执行 

- mounted  ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 

- beforeDestory : 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

其中key为对象里面的键，value为对象里面的值，其本意就是动态改变原来已经固定的值值，就需要使用vueset(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)

解析  

遍历后{{parentname}}的已经固定了，这时候点击编辑按钮，改变里面的值，虽然后台数据已经发生了改变，但那时页面渲染的效果并不会发生改变，这时候要想改变页面上的值，就需要使用vueset(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)， 

在空的数组中不能使用push传入数据，所以应当使用vm$set给数组添加

    使用v-bind动态给元素绑定

这样可以在遍历的时候给不同的元素动态绑定不同id

在下次dom更新循结束之后延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom

在vue中获取当前点击的元素对象，在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值，具体如 下

这个指令保持在元素上直到关联实例结束编译 /，可隐藏为编译的标签直到实例准备完毕

computer也是一个对象，类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存，写法如下：

前一兄弟元素必须有v-if 或v-else-if

前一兄弟必须有v-if或v-else-if

vue包含一组观察数组的变异方法，所以它们也会出发视图更新

由于javascript的限制，Vue不能检测一下变动的数组

对于已经创建实例，vue不能动态添加根级别的响应式属性，但是可以使用Vueset( object, key, value )方法嵌套对象添加响应式属性

props可以是数组或对象，用于接收来父组件的数据，或者使用对象作为替代

1axiospost('url', {data} )

axios发送跨域请求

  var headers ={

'headers':{

'Content-Type':' application/x-$>

111，，，，

<div class="all">全部评论</div>

<textarea :placeholder="'已有'+datapinglun+'条评论，快来说说你的'" @keyup13="submit123($event)"  class="replaycontent"></textarea>

<div class="fbjbox2">

<pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">

<div v-for="item in db" >

<div class="zce">

<img :src="itemhead_url"  class="man"/>

<div class="cont">

<h5>{{itemvname}}</h5>

<h4>{{itemcontent}}</h4>

<div class="mui-clearfix comment_end">

<span class="mui-pull-left">{{itemrtime|timeago}}</span>  //发布评论的时间这里的timeago是一种时间filter过滤器，把时间换成距离现在多久的时间。

<span class="mui-pull-right" style="padding-left:20px;width:70px;display:inline-block"><img src="img/3png"  width="18px" @click="zanComment(item,$event)"/>{{itemzancount}}</span>

</div>

</div>

</div>

</div>

</pull>

</div>

</div>

//开始是浅色的图标。点击赞的时候，前面的图标换成深色的31png。然后点赞的数量加1

methods:{

zanComment(db,e){

var img=$(esrcElement)attr("src");//指的就是当前的那个元素的src属性

if(img=="img/3png"){   //如果还是没有点击的效果。点击以后先评论数加1再改变

dbzancount++; //dbxxxx就是这个点击的

$(esrcElement)attr("src",'img/31png');    }

}

}

}

222、、、

<ul class="mui-table-view" v-for="item in list">

<li class="mui-table-view-cell" @tap="link({id:itemgoods_id})">  //跳转到指定页面根据这个的id

<a class="mui-navigate-right">

<img class="mui-pull-left img" :src="imgroot+itemgoods_image"/>

<div class="mui-media-body">       

<h4 >{{itemgoods_name}}</h4>

<p class="red1">￥{{itemgoods_price}}</p>

</div>

</a>

</li>

</ul>

methods:{

link(db){

this$routerpush({name:'商品详情'，params:{id:dbid,uid:localstoragegetItem('uid')}})//把内容传给商品详情的页面

}

}

下面是商品详情页面的js

mounted() {

this$api("Mp/goodsDetail", {goods_id: this$routeparamsid })then(obj => {});  //

在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动<h2>{{objprop}}</h2> 

<script src="/Scripts/vuejs"></script>

<script>

$(function () {

alert(1);

}); 

var vue = new Vue({ 

el: 'body',

data: {

//初始obj是空的，因此视图默认是什么都没有

obj:{}

},

ready: function () {

//这里是vue初始化完成后执行的函数

thisobjname = "对象名字";//这时会显示name

},

methods: {

//这里是自定义的方法

setProp: function () {

thisobjprop = "测试";//这时会显示测试

}

}

});

以上就是关于vue里怎么点击button获取input的值全部的内容，包括:vue里怎么点击button获取input的值、vue v-for 为元素添加点击事件的时候怎么才能处理当前dom元素、vue.js不使用dom *** 作，如何获取元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！