《跟热饭一起学习vue吧》Part.3 属性绑定

简介: 《跟热饭一起学习vue吧》Part.3 属性绑定


属性绑定

什么叫属性绑定?我们分开来解读

属性:一个元素标签内,可以写很多东西,比如id,name,style,click等等。但是这些并不都叫属性,比如onclick就不算属性。而id,name就是属性。

那么绑定是什么意思呢?就是这些属性的值,是可以在vue构造中的变量绑定起来,绑定起来有什么用呢?就可以控制了啊,通过更改vue构造的data里面的变量的值,就可以自动让元素内的属性内容跟着变!

那么这个绑定要怎么写呢?vue的一系列属性,一旦绑定上,那么有一些写法都会和原生的产生变化。

我们本节课学的就是一个class属性绑定变化。众所周知,class是用来决定这个元素采用什么样式的。接下来我们要学的这个例子比较复杂,但是其实说白了,就是告诉你,我可以通过控制,来让这个元素一会用 某个样式,一会不用,来回换。

image.png

这里我们先不用关心,vue里面data里的use变量的值是怎么变的,我们只学习它变了之后,我们div标签的class属性是否也跟着一起变即可。

image.png

这里我们注意红线部分,可以发现

1.在元素中的 ,你想要绑定的属性名之前加上 v-bind: 即可实现绑定.

2.class的内容是一个字典字符串,其中的不同样式名字就当做key,启用不启用就看值是true还是false,不过这里我们因为想控制,所以把这个值用 变量use来顶替。

3.变量在元素标签外,是用{{ }}来包裹的,但是在元素标签的属性内容里,在最外层一个大引号内,就直接写出来就行。我认为,vue底层这是把这段字符串进行求值的操作:"{'class1': use}" 内部的class1因为是key,所以要用区别于外层引号的 单引号来包裹。而use作为变量,则不能被任何包裹,否则写成'use' 那么就会被当做字符串解读,就不会找到vue构造中data里的那个use变量了。

4.其他的属性,诸如href等,估计也都是前面加v-bind: 来表示绑定起来了。

然后我们试着点了一下这个修改颜色,实现use变量从false变成true。结果发现这个div真的会自动启用上面的全局样式.class1,变成黑底白字:

image.png

大家暂时不用管这个use变量的值是如何变化的,这些我们之后会讲。本节课只要记住:【属性前面加v-bind: 属性里面写变量, 变量data里要有, data一变标签属性就变 】

即可。

相关文章
|
24天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
49 11
|
7天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
7天前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
7天前
|
JavaScript 前端开发
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
|
8天前
如何在 Vue3 中创建一个计算属性?
如何在 Vue3 中创建一个计算属性?
19 1
|
15天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
28 2
|
15天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
116 58
|
22天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
48 10
|
22天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
37 9
|
22天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
30 7
下一篇
无影云桌面