vuejs指令总结
一句话概括：数据决定决定显示。
简介：Vue.js的指令是以v-开头的，它们作用于HTML元素，会为绑定的目标元素添加一些特殊的行为，可以将指令看作特殊的HTML特性（attribute）。
特别提示：
1.{{这里必须是一个表达式}}
-
v-指令 这种格式，一旦使用了指令，虽然我们写的值看起来是字符串，因为我们使用"值"，但这个值已经是javascript了。
-
v-text
v-text可以用于替换插值表达式，如果有v-text，那么插值不起使用<div v-text="这里是javascript,而不是普通的字符">{{msg}}</div> <div v-text="'这里v-text的内容'">{{msg}}</div> //前者会生效，后者被替代 <div v-text="msg"></div> //这样可显示msg的内容 -
v-html
如果是富文本编辑器的内容，直接渲染的话，是被转义过的，那么html标签就会直接被渲染到页面
//错误示范 <div id="root"> <div>{{content}}</div> </div> <!-- 如果要输出正确的不带html标签转义的内容，就需要使用v-html指令 --> //正确用法 <div v-html="content"> </div> <script> const app = new Vue({ el: "#root", data: { msg: 'Hello 1901', content: '<p>这是后台<b>富文本编辑器</b>生成的<span style="font-size: 18px;">内容</span></p>' } }) </script>
常见内置指令：
-
v-if指令
-
v-show指令
-
v-else指令
-
v-for指令
-
v-bind指令
-
v-on指令
v-if指令
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
基本语法：
v-if="expression（表达式）"
expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。
<div id="app">
<div v-if="isCompleted">已完成</div>
<div v-if="age>=20">age:{{age}}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
age:25,
isCompleted: true
}
})
v-else指令
v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容
<div id="app">
<div v-if="isMale">男士</div>
<div v-else>女士</div>
</div>
var vm = new Vue({
el: '#app',
data: {
isMale:true
}
})
v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for="item in list"
list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始
<div id="root">
<div>{{msg}}</div>
<ul>
<li v-for="item in list">
<span>{{item.id}}</span>
<span>{{item.title}}</span>
<span>{{item.isCompleted ? '已完成' : '未完成'}}</span>
<span v-if="item.isCompleted === true" style="color: #090">已完成</span>
<i v-else style="color: #F00">未完成</i>
</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#root",
data: {
msg: 'Hello 1901',
list: [{
id: 1,
title: '打豆豆',
isCompleted: true
}, {
id: 2,
title: '写程序',
isCompleted: false
}, {
id: 3,
title: '吃饭',
isCompleted: false
}]
}
})
</script>
v-bind指令
v-bind:属性 用于动态绑定元素的属性 ，可简写为 ：属性
<div id="root">
<ul>
<!-- v-bind:属性 用于动态绑定元素的属性 -->
<li v-for="item in list" v-bind:key="item.id">
<!-- v-bind:属性可以直接简写为:属性 -->
<span>{{item.id}}</span>.<span :title="item.title">{{item.title}}</span>
</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#root",
data: {
msg: 'Hello 1901',
list: [{
id: 1,
title: '打豆豆'
}
}]
}
})
</script>
v-on 指令
v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件
<button v-on:click="show">
同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：
<button @click="show">
我们来看个例子：
img
<div id="root">
<!-- v-on:事件名 用于绑定一个事件，这个事件里可以直接操作data里的数据 -->
<button v-on:click="isModalShow = !isModalShow">隐藏/显示弹窗</button>
<!-- v-on:事件名可以缩写为 @事件名 -->
<button @click="isModalShow = !isModalShow">隐藏/显示弹窗</button>
<!-- 要想写成一个方法 -->
<button @click="toggleModalShow">隐藏/显示弹窗</button>
<div v-show="isModalShow === true">这是一个弹窗</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#root",
data: {
isModalShow: true
},
methods: {
// vue里的方法必须写在methods里面
toggleModalShow() {
this.isModalShow = !this.isModalShow
}
}
})
</script>
v-show指令
v-show和v-if区别。
v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染
-
v-if直接是移除dom节点或者插入，v-show是通过改变style的css样式，即display。v-show对于需要频繁切换显示隐藏的节点特别适用，特别是弹窗，手机注册，邮箱注册的两个tab的切换
<div id="root">
<div v-if="isModalShow === true">这是一个弹窗</div>
<div v-show="isModalShow === true">这是另一个弹窗</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#root",
data: {
isModalShow: true
}
})
</script>
- 待完善
网友评论