1.v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。
内部支持表达式。
<script src="assets/js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
{{name}}
{{addr}}
{{tell}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
name:"乐心湖",
addr:"广东深圳",
tell:"137222222"
}
})
</script>
2.v-html指令的作用是设置元素的innerHTML
内容中含有html结构会被解析为标签
而v-text指令无论内容是什么,只会解析为文本
解析文本时用v-text,需要解析html结构的使用v-html
3.v-show指令的作用是根据表达式的真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true时元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新.
4.v-if 指令的作用是根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换使用v-show,反之使用v-if,前者切换的消耗小.
5.v-bind指令的作用是为元素绑定属性
完整的写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式.
6.v-on指令的作用是为元素绑定事件
事件名不需要写on,指令可以简写为@
绑定的方法定义在methods,方法内部通过this关键字可以访问定义在data中的数据。
7.v-for指令的作用是根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index)in 数据, item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的.
8.v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联,绑定的数据和表单元素的值双向绑定
版权属于:乐心湖's Blog
本文链接:https://www.xn2001.com/archives/238.html
声明:博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!
One comment
加油!