vue指令
总结了一些vue中常用指令及其用法 可能不是很完整 欢迎提出您的建议 之后我也会持续添加
1.v-text
更新元素的文本内容。也可以使用 {{msg}} 插值。转义输出
<span v-text="msg"></span>
<span>{{msg}}</span>
2.v-html
更新元素的文本内容。不转义输出
<span v-html="msg"></span>
3.v-show
“v-show的用法与v-if基本一致,只不过v-show是改变元素的CSS属性display。当v-show表达式的值为true时,元素会显示,否则隐藏
<div id="app" >
<p v-show="status==1">当status为1时,显示该行</p>
</div>
<script>
//创建vue实例
var vue=new Vue({
el: '#app',
data: {
status: 2 //当status为1时,隐藏
}
});
</script>
4.v-if和v-else、v-else-if
v-if为true时,显示v-if的内容,否则继续判断v-else-if的内容,如果为true则显示,否则判断下一个v-else-if,知道为true时显示,若v-else-if都为false,则显示v-else的内容
v-else-if和v-else 前一兄弟元素必须为 v-if 或 v-else-if
<h2 v-if="true">v-if</h2>
<h2 v-else>v-else</h2>
5.v-for
当需要将一个数组遍历或枚举一个对象循环显示时候,我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用
<div id="app">
<ul>
<li v-for="(user, index) in user"> {{ user.name }} </li>
</ul>
</div>
<script>
var app= new Vue ({
el: "#app",
data () {
return {
users: [
{ name: "zhangsan"},
{ name: 'lisi'}
]
}
}
})
</script>
6.v-on
处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名=“函数名”
简写方式 @事件名=“表达式”
<button v-on:click="onClick"></button>
<button @click="onClick"></button>
7.v-bind
v-bind指令用于给html标签设置属性。
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
8.v-model
在表单控件或者组件上创建双向绑定。
<div id="demo">
<input v-model="msg">
<p>{{msg}}</p>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
msg: "hello",
},
})
</script>
9.v-pre
跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
<span v-pre>{{hello word}}</span> 显示的是{{hello word}}
<span v-pre>{{msg}}</span> 即使data里面定义了msg这里仍然是显示的{{msg}}
10.v-cloak
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。
<div id="app">
{{context}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
context:'xxxxxxxxxxxxxxxxxxxxxx'
}
});
</script>
11. v-once
被定义了 v-once 指令的元素或组件(包括元素或组件内的所有子孙节点)只能被渲染一次。首次渲染后,即使数据发生变化,也不会被重新渲染。一般用于静态内容展示。
<div id="app">
<div v-once>
{{content}}
</div>
</div>
script>
var app = new Vue({
el: '#app',
data: {
content:'xxxxxxx'
}
});
this.content='123456789';
</script>