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

2021/4/13 10:31:14

本文主要是介绍【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>

在这里插入图片描述

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

❤️



这篇关于【Vue】v-xxx指令全面总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程