【Vue】v-xxx指令全面总结

文章目录

v-text & v-html
v-model
v-on
v-for
v-if & v-show
v-bind

v-text & v-html

在讲这两个指令之前，先说说我们很熟悉的插值，再来说说用这两条指令替代插值的好处。

语法:

{{插值表达式}}

说明：

（1）这是使用Vue实例最简单的方式——花括号内部可以直接使用Vue实例的数据和方法

（2）不管是直接写个js语句，还是调用Vue实例，花括号内部必须有返回值

（3）当网速过慢，数据尚未加载成功时，页面时会显示最原始的花括号，这种现象叫做 插值闪烁 —— 使用指令可以避免这种现象

语法:

<span v-text="msg"></span>
<span v-html="msg"></span>

说明：

（1）将数据写到元素内部，如果数据是HTML语句，会被当作普通文本

（2）将数据写到元素内部，如果数据是HTML语句，会作为HTML被渲染

演示：

<div id="app"><span v-text="msg"></span><br><span v-html="msg"></span><br>
</div>
<script type="text/javascript">var app = new Vue({el: "#app",data: {// 注意这里的数据msg: "<h2>Lolisuki!<h2>"}});
</script>

v-model

语法:

<input type="checkbox" value="111" v-model="xxx">111<br>
<input type="checkbox" value="222" v-model="xxx">222<br>
<input type="checkbox" value="333" v-model="xxx">333<br>

说明：

（1）上面讲的v-text/v-html其实是单向绑定，因为此时页面上的元素并不能被用户改动

（2）而v-model可是实现模型与视图的双向绑定，因为使用v-model的元素都是用户可以在视图直接修改的

（3）所以可使用v-model的元素有：input、select、textarea、checkbox、radio等

（4）上面的这些元素，对应的绑定数据的类型是不同的。比如input、textarea对应字符串，select、checkbox对应数组

演示：

<div id="app"><input type="checkbox" value="物述有栖" v-model="vtuber">物述有栖<br><input type="checkbox" value="神乐七奈" v-model="vtuber">神乐七奈<br><input type="checkbox" value="猫宫日向" v-model="vtuber">猫宫日向<br><h2>你选择了：{{vtuber.join(" ")}}</h2>
</div>
<script type="text/javascript">var app = new Vue({el: "#app",data: {vtuber: []}});
</script>

v-on

语法:

v-on:click="xxxxxx"
@click="xxxxxxx"

说明：

（1）用于给页面元素绑定事件

（2）之前我们使用的 event.preventDefault() 或 event.stopPropagation() 在Vue中如何实现呢？用下面的这些事件修饰符：

事件修饰符	作用
.stop	阻止事件冒泡
.prevent	阻止默认事件发生
.capture	使用事件捕获模式
.self	只有元素自身触发事件才执行，冒泡或捕获的都不执行
.once	只执行一次

演示：

<div id="app"><button v-on:click="inc">增加</button><button v-on:click="dec">减少</button><h2>num = {{num}}</h2>
</div>
<script type="text/javascript">var app = new Vue({el: "#app",data: {num: 1},methods: {inc() {this.num++;},dec() {this.num--;}}});
</script>

v-for

语法:

遍历数组：
v-for="item in items"
遍历对象：
v-for="value in object"
v-for="(value,key) in object"

说明：

（1）既可以遍历数组元素，又可以遍历对象属性

（2）还可以在遍历时加上下标，比如 v-for="(item, index) in items"

演示：

<div id="app"><ul><li v-for="user in users">{{user.name}} 的年龄是 {{user.age}}</li></ul><br><ul><li v-for="(value, key) in person">对象的属性{{key}}，对象的属性值{{value}}</li></ul>
</div>
<script type="text/javascript">var app = new Vue({el: "#app",data: {// 对象列表users: [{"name": "Alice", "age": 12},{"name": "Mana", "age": 11},{"name": "Hana", "age": 11},],// 单个对象person: {"name": "Alice", "age": 12}}});
</script>

v-if & v-show

语法:

v-if="布尔表达式"
v-show="布尔表达式"

说明：

（1）v-if为false的时候，元素直接会不存在

（2）v-show为false的时候，元素只是display: none而已

（3）你甚至可以使用 v-else-if 和 v-else

演示：

<div id="app"><button @click="show=!show">点我切换</button><h2 v-if="show">Lolisuki！！！</h2>
</div>
<script type="text/javascript">var app = new Vue({el: "#app",data: {show: true}});
</script>

v-bind

语法:

v-bind:属性名="Vue中的变量"

说明：

（1）v-bind用于在属性上（即标签上的各种字段）使用Vue数据

（2）因为元素的属性是不允许使用插值的，所以修改元素属性也只能使用v-bind

演示：

<div id="app"><img v-bind:src="imgSrc" :height="imgHeight" :width="imgWidth"/><div v-bind:style="divStyle">Lolisuki!!!</div><div v-bind:class="divClass">Lolisuki!!!</div>
</div>
<script type="text/javascript">var app = new Vue({el: "#app",data: {imgSrc: "img/pic.png",imgHeight: "600px",imgWidth: "1000px",divStyle: "color:pink",divClass: "pink" // css中要有.pink类}});
</script>

❤️