v-bind与v-model的联系与区别

悠悠 2022-05-10 11:12 139阅读 0赞

最近在学 Vue.js，以下是对 v-bind 和 v-model 的一些见解。  
当我们需要给a标签添加链接的时候，之前学的方式是这样的：

但是这样带来不好的结果就是href后面的地址是固定的，那我们能不能找一种办法来使 href 后面的链接动态改变呢？答案是有的，于是 v-bind 就出现了。我个人的理解是：在我们需要绑定的属性前面加上 v-bind 之后，v-bind 就和该属性绑定在一起了，就像用线将两个物体链接在一起，不管线的那一头怎么改变，它们都是连在一起（重新修改：这其实是 Vue 响应式系统的依赖收集，当绑定的值改变时触发 setter 方法，当获取值的时候触发 getter 方法）。

// HTML
    <a v-bind:href="url">网络测试</a>  //v-bind绑定href。
    new Vue({
    	...
    	data {
    		url: "http://www.baidu.com"
    		}
    })

我们只需要改变 data 中 url 的值，就能使 a 标签跳转到与修改后的值对应的的页面（需要考虑同源策略）。

v-model 是动态的双向数据绑定（只能用在input, textarea, select上），以 input 为例，绑定之后随着 input 中输入内容的改变，对应绑定的数据也跟着改变（在编译阶段，vue 会编译相应的指令并依赖收集，当数据改变时触发 setter 事件并更新数据）。

// HTML
    <input type="text" v-model="message">
    new Vue({
    	data {
    		message: ' ', //最开始message为空
    	} 
    })

当在 input 中输入数据的时候，data 中 message 的数据也会动态的跟着变化：

<input type="text" v-model="message">  / /在input中输入：今天好困
    
    data {
    	message: '今天好困 ',   // 此时message中数据自动更新为“今天好困”
    }

从上面这个例子中我们可以看出，其实 v-model 就是 v-bind 加上 v-on 的变形体（或者语法糖）

小福利：  
v-model 的修饰符：  
1.v-model.lazy 看名字就知道它比较懒，意思是等在input中输入完成鼠标点击别处（blur）后，才开始更新数据。  
2.v-model.trim 作用是修剪字符串前后空格，不过要慎用该功能，比如在输入密码时不能用，因为有可能密码中本身带有空格。  
3.v-model.number 只用在输入是数字的情况。