vue2.0数据双向绑定与表单bootstrap+vue组件

最近一直在用vue，觉得确实是好用。

一，拿数据的双向绑定来说吧

rush:js;"> <Meta charset="UTF-8">

vue中的所有数据都是在data中定义的，

el是指的挂载的元素，

watch 是我可以检测某个数据的变化。

v-model=“name” 就是与data中的name数据绑定，input框中的值变，那么data中的name也会变，我们可以通过差值操作，也就是{{name}}来看到变化，当然也可以像我一样打log。都是可以的。

当然这样也许还不是很实用，官网上也是这么介绍的，那么就说我在工作中是怎么用的吧

现在我的需求是要得到我表单里边的所有value ，我们也许可以

rush:js;"> let service = $('.vendor').val(); let vendor = document.getElementsByClassName('vendor')[0].value;

但是这样就完全没有get到vue双向绑定的好处了，那么我们该怎么做呢？

rush:js;"> import service from './components/service.vue'; import $ from 'jquery'; export default { data () { return { resultData: '',vendor: '',dType: '',services: [service],items: [service],device: '',dDesc: '' } },watch: { services () { console.log(this.services); },items (val) { this.items = val; console.log(this.items); } },components: { service },methods: { addService (component) { this.items.push(component); },childServicesChange (val) { this.services = val; },commit () { console.log('commit'); let device = { "type": 'urn:' + this.vendor + ':device:' + this.dType + ':0000',"description": this.dDesc,"services": this.items };

看到没，我就是直接用的this.vendor， vendor是在data中定义好的，也进行了双向绑定v-model

rush:js;">

以上所述是小编给大家介绍的vue2.0数据双向绑定与表单bootstrap+vue组件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：利用Vue.js框架实现火车票查询系统下一篇：基于vue2.0+vuex+localStorage开发