v-bind和v-model

最新推荐文章于 2024-08-11 22:10:39 发布

二九君

最新推荐文章于 2024-08-11 22:10:39 发布

阅读量934

点赞数 1

分类专栏：前端 Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44019523/article/details/113763625

版权

本文详细介绍了Vue中v-bind用于动态绑定属性的原理与用法，包括其简写形式。接着讲解了v-model如何实现双向数据绑定，特别是在input元素上的应用。此外，还探讨了v-model的修饰符，如lazy实现失去焦点或回车时才更新数据，number用于将输入转为数字类型，以及trim用于去除首尾空格的功能。

摘要由CSDN通过智能技术生成

一、v-bind

v-bind可以动态绑定标签中属性的值,为单向绑定，当data值发生变化时才会变化 例如：

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

还可以通过v-bind来动态绑定类名：
语法为：v-bind:class="{类名：布尔值}

<h2 v-bind:class="{active:true,line:false}"><h2>

v-bind的语法糖为:属性值

二、v-model

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