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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。