属性绑定

Vue 如何动态处理属性

v-bind

// template:v-bind 使用
百度
小米

// 业务逻辑
data: {
    url: 'https://www.baidu.com/', // 绑定数据A
    url1: 'https://www.mi.com/?masid=2701.0074', // 绑定数据B
}

v-model底层实现原理分析：

v-model实际上是利用v-bind绑定属性value的值，然后通过绑定input事件来监听值的变化。并通过事件处理函数来改变value的值。

// template


// 业务逻辑
data: {
      msg: "hello world"
},
methods: {
      handle: function (e) {
　　　　　　　　// 使用输入域中最新的数据覆盖原来的数据
             this.msg = e.target.value;
      }
}

上面的代码看起来比较麻烦，下面这种方式更加简洁：

// template


// 业务逻辑
data: {
     msg: "hello world"
}

最后用指令v-model来实现，整个代码变得更加简洁

// template


// 业务逻辑
data: {
    msg: "hello world"
}