八個(gè)Vue中常用的v指令詳解

更新時(shí)間：2022年04月22日 10:26:45 作者：云夢歸遙

vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個(gè)Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下

Vue中常用的8種v指令

根據(jù)官網(wǎng)的介紹，指令是帶有 v- 前綴的特殊屬性。通過指令來操作DOM元素

指令	功能
v-text=“變量/表達(dá)式”	文本的設(shè)置字符串變量+數(shù)字可以直接寫是拼接字符串如果出現(xiàn)要使用外部不相同的引號
v-html=“變量”	文本或者頁面的設(shè)置如果變量只是普通文本，作用和 v-text 相同如果變量是一個(gè)完整的標(biāo)簽字符串，則會解析成為html
v-on:click=“方法名” @click=“方法名”	綁定方法可以是無參方法，也可以是有參方法
v-show=“布爾值變量”	標(biāo)簽的顯示和隱藏根據(jù)布爾值變量的真與假，將標(biāo)簽顯示或隱藏
v-if=“布爾值變量”	標(biāo)簽的創(chuàng)建與銷毀效果與 v-show 相同，但是頻繁操作性能開銷很大
v-for="item,index in arr" v-for=“item in arr”	數(shù)組的循環(huán)遍歷將數(shù)組中的數(shù)據(jù)，索引進(jìn)行遍歷
v-bind:標(biāo)簽屬性=“屬性值” :標(biāo)簽屬性=“屬性值”	標(biāo)簽屬性的綁定可以直接修改標(biāo)簽中的屬性值
v-model=“變量值”	數(shù)據(jù)雙向綁定變量值的修改會影響頁面顯示，頁面變化也會影響變量值

1 v-text 指令

作用:

獲取data數(shù)據(jù), 設(shè)置標(biāo)簽的內(nèi)容，以純文本進(jìn)行顯示
v-text 會覆蓋標(biāo)簽中的內(nèi)容，如果想要拼接數(shù)據(jù)，可以直接在v-text中拼接
- 如果拼接的是數(shù)字：直接使用 “+”
- 如果拼接的是字符串，需要使用與外部不同的引號進(jìn)行包裹內(nèi)容

注意: 默認(rèn)寫法會替換全部內(nèi)容,使用插值表達(dá)式{{}}可以替換指定內(nèi)容.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 第一種.獲取 vue 中定義的數(shù)據(jù)，會將插值表達(dá)式的內(nèi)容與標(biāo)簽中的內(nèi)容進(jìn)行拼接 -->
        <h2>{{msg}}-云夢歸遙</h2>
        <!-- 第二種.獲取 vue 中定義的數(shù)據(jù)，設(shè)置標(biāo)簽中的內(nèi)容，而且會覆蓋標(biāo)簽中的內(nèi)容 -->
        <h2 v-text="msg">-云夢歸遙</h2>
        <h2 v-text="msg+21"></h2> <!-- v-text 拼接數(shù)字可以直接相加 -->
        <h2 v-text="msg+'-云夢歸遙'"></h2> <!-- v-text 拼接字符串需要用不同于外部的單引號或雙引號 -->
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java 程序員",
        },
    });
</script>
</html>

2 v-html 指令

作用:

可以當(dāng)做 v-text 一樣使用，顯示普通文本

設(shè)置元素的 innerHTML (可以向元素中寫入新的標(biāo)簽)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1.獲取普通文本的三種方式 -->
        <h2>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2 v-html="msg"></h2>
        <hr>
        <!-- 2.v-html 不僅可以當(dāng)做 v-text 使用，更重要的是可以設(shè)置元素的 innerHTML -->
        <h2 v-text="url"></h2> <!-- v-text 直接以文本形式進(jìn)行顯示 -->
        <h2 v-html="url"></h2> <!-- v-html 將會以定義的標(biāo)簽的形式進(jìn)行顯示 -->
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java程序員",
            url: "<a 
        },
    });
</script>
</html>

3 v-on 指令

作用: 為元素綁定事件, 比如: v-on:click,可以簡寫為 @click="方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1.單擊事件 -->
        <!-- 標(biāo)準(zhǔn)書寫的方式 v-on:click="方法名" -->
        <input type="button" value="調(diào)用v-on指令-單擊事件-標(biāo)準(zhǔn)書寫" v-on:click="show"><br>
        <!-- 簡寫的方式: @click="方法名" -->
        <input type="button" value="調(diào)用v-on指令-單擊事件-簡寫的方式" @click="show"><br>
        <!-- 2.雙擊事件 -->
        <input type="button" value="雙擊事件" @dblclick="show"><br>
        <hr>
        <!-- 綁定點(diǎn)擊事件，修改標(biāo)簽內(nèi)容 -->
        <h2 @click="changeName">{{msg}}</h2>
        <h2 v-text="msg" @click="changeName"></h2>
        <h2 v-html="msg" @click="changeName"></h2>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java程序員"
        },
        // 通過 methods 來定義 v-on 中調(diào)用的方法
        methods: {
            show:function(){
                alert("v-on 指令對應(yīng)的方法被調(diào)用");
            },
            changeName:function(){
                // 使用 this 獲取 data 中的數(shù)據(jù)
                this.msg += "-云夢歸遙";
            },
        },
    });
</script>
</html>

案例：計(jì)數(shù)器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <!-- <link href="css/inputNum.css" rel="external nofollow"  rel="stylesheet"> -->
</head>
<body>
    <div id="app">
        <!-- 計(jì)算功能區(qū)域 -->
        <div>
            <input type="button" @click="addNum" value="+">
            <span>{{num}}</span>
            <input type="button" v-on:click="minusNum" value="-">
        </div>
        <p>{{result}}</p>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            num: 0,
            result: "當(dāng)前數(shù)值是[ 0 ], 還未執(zhí)行操作"
        },
        methods: {
            addNum: function(){
                this.num += 1;
                this.result = "當(dāng)前數(shù)值是[ " + this.num + " ], 執(zhí)行 +1 操作";
            },
            minusNum: function(){
                this.num -= 1;
                this.result = "當(dāng)前數(shù)值是[ " + this.num + " ], 執(zhí)行 -1 操作";
            },
        },
    });
</script>
</html>

4 v-show 指令

作用: v-show 需要一個(gè) boolean 類型的值，根據(jù)值的變化，進(jìn)行標(biāo)簽的顯示和隱藏

原理：修改 style 的display為 block 或 none，進(jìn)行顯示和隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="圖片顯示/隱藏切換" @click="show"><br>
        <!-- v-show 需要一個(gè) boolean 類型的值，根據(jù)值的變化，進(jìn)行標(biāo)簽的顯示和隱藏 -->
        <img src="img/logo.jpg" v-show="flag" style="width: 300px; height: 300px;">
        <!-- 還可以通過表達(dá)式的結(jié)果 來進(jìn)行顯示和隱藏 -->
        <img src="img/logo.jpg" v-show="num > 18" style="width: 300px; height: 300px;">
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            flag: true, // 作為是否顯示圖片的判定值
            num: 21
        },
        methods: {
            show:function(){
                this.flag = !this.flag;
            },
        },
    });
</script>
</html>

5 v-if 指令

作用: 根據(jù)表達(dá)值的真假,切換元素的顯示和隱藏( 操縱dom 元素 )

原理：會操作 DOM 元素，將元素刪除或添加，而不是像 v-show 一樣修改樣式

使用場景：頻繁切換使用 v-show，反之使用 v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="v-if切換圖片顯示/隱藏" @click="show"><br>
        <!-- v-if 根據(jù)表達(dá)式的真假判斷顯示 或 隱藏 -->
        <img src="img/logo.jpg" style="width: 300px; height: 300px;" v-if="isShow">
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data:{
            isShow: false,
        },
        methods: {
            show: function(){
                this.isShow = !this.isShow;
            },
        },
    });
</script>
</html>

6 v-bind 指令

作用: 設(shè)置元素的屬性（比如：src，title，class，style傳遞json串）

一次只能修改一個(gè)屬性

v-bind:屬性名=“屬性值”
:屬性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 這是原圖片 -->
        <img src="img/logo.jpg" style="width: 300px;height: 300px;" alt="圖片加載失敗">
        <!-- v-bind:src 設(shè)置了一個(gè) 圖片的 屬性 -->
        <img v-bind:src="img1" style="width: 450px; height: 300px;" alt="圖片加載失敗">
        <!-- v-bind:title 設(shè)置了一個(gè)圖片的 標(biāo)題 ，使用 v-bind修改屬性都可以簡寫為 :屬性名-->
        <img v-bind:src="img2" style="width: 450px;height: 300px;" :title="img2_title" alt="圖片加載失敗">
        <!-- v-bind 設(shè)置 class -->
        <div style="width: 300px; height: 300px; background: green;" :style="{width: size + 'px'}"></div>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            img1: "img/4.png",
            img2: "img/3.png",
            img2_title: "斗羅大陸-火舞",
            size: 200,
        },
        methods: {
            
        },
    });
</script>
</html>

7 v-for 指令

作用: 根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)，常與數(shù)組一起使用，進(jìn)行遍歷操作

v-for="item,index in arr1"
v-for="person in persons"

相關(guān)方法：

push（）：將元素追加進(jìn)入數(shù)組
shift（）：將數(shù)組的起始元素刪除

數(shù)組的長度變化,會同步更新到頁面上,是響應(yīng)式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- v-for：在 li 標(biāo)簽中進(jìn)行獲取數(shù)組元素，進(jìn)行展示 -->
            <!-- item: 循環(huán)得到的元素；index：獲取元素在數(shù)組中的下標(biāo) -->
            <li v-for="item,index in arr1">
                第{{index + 1}}個(gè)同學(xué): {{item}}
            </li>
        </ul>
        <hr>
        <input type="button" value="添加數(shù)據(jù)" @click="addData">
        <input type="button" value="移除數(shù)據(jù)" @click="removeData">
        <!-- v-for 遍歷，展示數(shù)據(jù) -->
        <h2 v-for="person in persons">
            我是 {{person.name}}, 我今年 {{person.age}} 歲.
        </h2>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            // 數(shù)組
            arr1: ["Mike", "John", "Jack"],
            // 對象數(shù)組
            persons: [
                {name: "Mike", age: 21},
                {name: "John", age: 22},
                {name: "Jack", age: 23},
            ],
        },
        methods: {
            addData: function(){
                // 向數(shù)組中添加元素
                this.persons.push({name: "Peter", age: 24});
            },
            removeData: function(){
                // 移除數(shù)組中的元素，會移除第一個(gè)元素
                this.persons.shift();
            },
        },
    });
</script>
</html>

8 v-on 補(bǔ)充

作用：

可以向函數(shù)傳遞參數(shù)
事件修飾符，可以制定哪些方式觸發(fā)事件，比如說按鍵，回車等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on：綁定函數(shù)，可以進(jìn)行傳參 -->
        <input type="button" value="禮物刷起來" @click="show(3, '穿云箭')"><br>
        <span style="color: green;">向主播狂刷{{num}}個(gè)</span>
        <span style="color: red;">{{gift}}</span>
        <hr>
        <!-- v-on：事件修飾符 指定哪些方式觸發(fā)事件，比如說 按鍵，回車等等 -->
        <input type="text" @keyup="up" placeholder="一輸入內(nèi)容就會彈窗"><br>
        <input type="text" @keyup.enter="up" placeholder="輸入回車才會彈窗"><br>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            num: 1,
            gift: "一個(gè)魚丸",
        },
        methods: {
            show:function(p1, p2){
                this.num = p1;
                this.gift = p2;
            },
            up:function(){
                alert("hello world");
            },
        },
    });
</script>
</html>