1.什么是指令
在vue中提供了⼀些对于页面 + 数据的更为方便的输出, 这些操作就叫做指令, 以v-xxx表示
例:
在vue中 以v-xxx开头的就叫做指令
指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值,框架会进⾏相关DOM操作的绑定
vue中常⽤的v-指令演示
v-text:
v-html: 元素的innerHTML
v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建
v-else-if
v-else
v-show 隐藏元素
如果确定要隐藏, 会给元素的style加 上display:none。是基于css样式的切换
说明: v-if和v-show的区别?
v-if为DOM渲染属性, 通过添加删除DOM节点实现
v-show属于css渲染, 通过css的display:none实现
v-bind使⽤ 给元素的属性赋值
可以给已经存在的属性赋值
也可以给⾃定义属性赋值
语法:
在元素上 v-bind:属性名=“常量||变量名”
例:
v-bind:href = ‘res.url’ 可以简写为 :href = ‘res.url’
ps: 如果直接绑定属性值时,可以不用外部{ } , 如果设置属性与属性值时,要加入外部的{ }
:src=“变量” 绑定图片地址
:class = “{active:isActive}” 增加样式, active=’变量’
样式改变:
:style=’{color:isColor,fontSize:fontSize+“px”} 中间的变量可以直接被解析
功能类似于 jq中 attr为标签设置属性
简写形式 :属性名="变量名"v-on的