成都网站建设设计

将想法与焦点和您一起共享

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

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

成都创新互联是专业的聂拉木网站建设公司,聂拉木接单;提供网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行聂拉木网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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




  
  demo1


  
{{ name }}

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

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

el是指的挂载的元素,

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

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

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

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

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

 let service = $('.vendor').val();
        let vendor = document.getElementsByClassName('vendor')[0].value;

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

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

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

以上所述是小编给大家介绍的vue2.0数据双向绑定与表单bootstrap+vue组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


当前文章:vue2.0数据双向绑定与表单bootstrap+vue组件
分享链接:http://chengdu.cdxwcx.cn/article/jjsgec.html