vue各种指令总结
2018-09-06 本文已影响0人
雨后晴阳
1.v-text
该指令可以渲染文本 在标签属性位置上写上 v-text ="属性名"
和插值表达式区别是 插值表达式 卸载innerHTML位置 v-text 写在标签属性位置
2.v-html
用来渲染带标签的文本,网站上动态渲染任意的html危险 ,容易受到xss攻击,只在可信内容上使用 v-html 提交的内容不可使用
3.v-bind
动态绑定属性 例如 <img v-bind:src="url"> url可以在data中获取其中 v-bind可以省略
4.v-for
用来渲染数组和对象
1.渲染数组
在标签属性的位置上写上 v-for ="(item,index) in arr" :key="index" //key必须加上 值为一个该数组不重复的项
2渲染对象
' 在标签属性位置上写上 v-for="(value,key,index) in obj" :key="index"
5.v-model
双向数据绑定model和view中的值进行同步变化
6.v-on
用来监听dom事件
方法 v-on:事件类型 ="执行函数" 执行函数中可以添加参数可以传递$event对象
例子:
7.v-if
通过控制dom来控制元素的显示隐藏
涉及到异步数据渲染的时候就要使用v-if
8.v-show
通过控制样式 display:none来控制元素的显示和隐藏
涉及到大量dom操作的时候需要使用v-show
9.v-cloak
给闪烁的元素加上v-cloak指令
例子