2. Vue語法--插值操作&動態綁定屬性

小編:管理員 113閱讀 2022.08.18

目錄1. 設置vue模板2. vue語法--插值操作3. 動態綁定屬性--v-bind一. 設置vue模板

我們經常新建一個vue項目的時候, 會寫如下的一段代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:"hello"
        }
    })
</script>
</body>
</html>

復制

其實這就是一個代碼的模板. 那么我們如何才能快速的創建這樣的代碼,而不是每次都手寫呢? 將其創建為模板.

第一步: 設置-->Preference-->Live Template第二步: 添加一個group, 命名為vue. 這個視情況而定, 如果已經有了,就不用再定義了

第三步: 添加一個Live template模板,將下面的代碼復制到Template text中.

<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:"hello"
        }
    })
</script>

復制

第四步: 在頁面使用快捷鍵快速生產vue模板. 快捷鍵是vue + tab鍵

這樣就可以快速的生成vue框架代碼了, 節省了時間.

二. vue語法 -- 插值操作

什么是插值操作呢? 

簡單說, 就是將data中的文本數據,插入到html中.

復制1. 插值操作--Mastacha語法

語法: {{數據}}
- {{}} 獲取vue變量的值, {{}} 這種寫法就是Mastacha語法. 什么是mastacha語法? 可以參考這篇文章: https://www.cnblogs.com/DF-fzh/p/5979093.html
- 插值運算符可以顯示的對數據進行計算
- 給html標簽的內容賦值, 不可以給標簽中的屬性賦值.
舉例:

<div id="app">
        <!-- 可以輸出String -->
        <h2 v-text="name"></h2>
        <!-- 也可以輸出數字  也可以計算 -->
        <h2 v-text="count * 2"></h2>
        <!-- 這樣的寫法v-text會替換標簽的內容 -->
        <h2 v-text="name">Hello</h2>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                name:"Vue",
                count:10,
            }
        })
    </script>

復制2. 常見的其他插值操作

v-bind: 動態綁定屬性
v-once: 保留第一次渲染結果
v-html : 把html代碼解析，只顯示內容
v-text: 顯示文本
v-pre: 原樣輸出
v-cloak: 解決文本閃爍問題

3. v-once: 保留第一次渲染結果

有些情況下, 我們不希望界面隨意的跟隨改變, 這時候我們可以使用vue的v-once指令

v-once: 該指令后面不需要增加任何表達式
該指令表示元素和組件只渲染一次, 不會隨著數據的改變而改變

看下面這個例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{name}}</h2>
    <h2 v-once> {{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello, everyone",
            name: "summer",
            age: 18
        }
    });
</script>
</body>
</html>

復制

同樣是打印輸出{{name}},第二個加了v-once, 加了這個是什么含義呢?

我們先來看看效果

然后, 我們修改在控制臺name的值

我們發現, 在控制臺將app.name的值修改了以后, 加了v-once的元素值沒有跟隨改變.

v-once的意思就是: 在第一次的時候設置完值以后, 后面的修改不會影響到這個元素值

4. v-html : 把html代碼解析，只顯示內容

有時, 我們從服務器請求到的數據本身就是一個HTML代碼, 如果我們直接通過{{}}來輸出, 就將html代碼直接輸出了, 但是我們希望它能夠按照html進行解析, 然后顯示解析后的結果.這時, 我們可以使用v-html?

該指令后面通常會跟隨一個string類型的字符串
會將spring類型的html代碼解析并渲染

看下面的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url">url </h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            url: "<a 

        }
    });
</script>
</body>
</html>

復制

這里打印了兩個url, 我們來看看效果

第一個是將url的內容直接輸出了, 而第二個是解析了html代碼后輸出的.

5. v-text: 顯示文本

顯示文本內容, 通常和{{}}的效果是一樣的, 我們使用{{}}的頻率會更高一些, 因為v-text會有一些局限性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{name}}, 你好</h2>
    <h2 v-text="name">, 你好 </h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "summer"
        }
    });
</script>
</body>
</html>

復制

我們看到, 使用{{name}} 后面還可以跟其他內容. 但是使用v-text, 后面更得內容會被覆蓋掉, 來看效果

6.v-pre: 原樣輸出

v-pre用于跳過這個元素和他的子元素的編譯過程, 顯示的是原本的內容.

我們來看一下案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{name}}</h2>
    <h2 v-pre> {{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "summer"
        }
    });
</script>
</body>
</html>

復制

我們看到, 一個元素沒有加v-pre, 第二個元素加了v-pre, 那么效果是什么樣的呢?

使用了v-pre的元素跳過了編譯過程, 原樣輸出了元素的內容.

7.v-cloak: 解決文本閃爍問題

在真實的項目中, 內容很多, 有可能在加載new Vue()對象之前卡住了. 而頁面是從上到下加載的, div加載完了,顯示的就是{{message}}, 這是new Vue()卡住了, 那么用戶就會看到{{message}}這樣的文字,

其實這樣是很不友好的. 為了避免這種情況, 我們可以使用vue的v-cloak指令. 在vue加載之前, 先將其遮住. 效果如下圖

這個問題, 可以使用vue的v-cloak來解決. 先來看看代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    setTimeout(function(){
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            }
        });
    }, 1000);

</script>
</body>
</html>

復制

其他設置都一樣, 不一樣的是, 在div標簽里增加了v-cloak指令. 然后給這個指令元素設置了一個style樣式.

在這里, 我們還使用setTimeout來模擬延時1秒顯示的狀況. 在樣式表中設置一個屬性[v-cloak]的display為none不顯示. 當new Vue()代碼執行以后, 就是將元素中v-cloak刪除掉, 這樣樣式也不起作用.

我們來看看效果

剛開始, 沒有加載new Vue()元素的時候, 就不顯示div的內容. 加載了new Vue()對象以后, vue會自動將v-cloak指令刪除, 這樣div的內容就顯示出來了.

三. 動態綁定屬性--v-bind指令

上面的插值操作, 通常都是插入到模板的內容中.

Mastache語法也是插入值到模板的內容. 但是不能插入到屬性.

可是, 除了內容, 有時我們希望動態綁定a標簽的src元素, 或者img的src元素, 這個時候, 我們可以用到v-bind指令

1. v-bind基本用法

v-bind指令有兩種寫法

第一種: <a v-bind:href="url">Hello</a>
第二種: <a :href="url">Hello</a>

第二種寫法是v-bind的縮寫.

復制

如下示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
</head>
<body>
<div id="app">
    <img width="100px" height="100px" v-bind:src="src"></img>
    <a v-bind:href="href">百度</a>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg14.360buyimg.com%2Fn0%2Fjfs%2Ft2740%2F163%2F951722573%2F619210%2Fcd4a7b33%2F572df1b5N85de4909.png&refer=http%3A%2F%2Fimg14.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616318081&t=f8e815503efff6d6871f732bea62c68f",
            href:"http://www.baidu.com"
        }
    });
</script>
</body>
</html>

復制

我們在data中定義了src和href兩個屬性, 如果想要賦值給img表示和a標簽, 不能直接像下面這么寫. 這樣會被直接輸出

<img width="100px" height="100px" src="{{src}}"></img>
    
<a href="{{href}}">百度</a>

復制

這樣肯定是不可以的. 這時需要使用v-bind

<img width="100px" height="100px" v-bind:src="src"></img>
    
<a v-bind:href="href">百度</a>

復制

我們還可以是用v-bind的縮寫, 在實際項目開發中, 使用縮寫的概率更大

<img width="100px" height="100px" :src="src"></img>
    
<a :href="href">百度</a>

復制2. v-bind動態綁定class(對象語法)

有些class對象需要動態賦值. 比如: 在列表頁, 每條記錄有一個復選框, 勾選復選框顯示勾選樣式, 取消勾選顯示取消勾選樣式. 這種情況使用vue怎么寫呢?

<a :href="url" class="title" :class="{key:value, key:value }">Hello</a>

在class屬性中, 我們可以使用{}來定義多個屬性. 語法結構{key: value, key:value}, key是樣式名稱. value值是true或者false
如果是true就啟用樣式, false就禁用樣式

復制

來看下面的案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 v-bind:class="{active: isActive}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            isActive: true
        }
    });
</script>
</body>
</html>

復制

在data中定義了一個isActive, class對象中如何寫的呢?

<h2 v-bind:class="{active: isActive}">{{message}}</h2>

復制

active指的是style樣式的名稱, isActive是取data中的值. 這個結果就是顯示active樣式, 效果如下:

還可以使用methods方法來控制class的顯示.

<a :href="url" class="title" :class="getClasses()">Hello</a>

復制案例: 有一個按鈕, 點擊一下顯示紅色, 再點擊一下沒有顏色.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 v-bind:class="{active: isActive}">{{message}}</h2>
    <button :class = "{active: isActive}" v-on:click="getActive">按鈕</button>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            isActive: true
        },
        methods:{
            getActive: function() {
                this.isActive = !this.isActive;
            }
        }
    });
</script>
</body>
</html>

復制

來看看效果

2) v-bind動態綁定class:(數組語法)

<h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
<h2 :class="getClassArray()">{{message}}</h2>

復制

完整代碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active {
            color: red;
        }

        .line {
            background: #666;
        }
    </style>
</head>
<div id="app">
    <a v-bind:href="url">Hello</a>
    <!-- 動態綁定class{對象語法} -->
    <a :href="url" class="title" :class="{active:isActive,line:isLine}">Hello</a>
    <a :href="url" class="title" :class="getClasses()">Hello</a>

    <!-- 動態綁定class[數組語法] -->
    <h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
    <h2 :class="getClassArray()">{{message}}</h2>
    <h2></h2>
    <button v-on:click="getClass">按鈕</button>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                message: 'Hello world',
                url: 'https://www.baidu.com/',
                isActive: true,
                isLine: true,
                classaArray: 'active',
                classaArray2: 'line'
            }),
            methods: {
                getClass: function () {
                    this.isActive = !this.isActive
                },
                getClasses: function () {
                    return { active: this.isActive, line: this.isLine }
                },
                getClassArray: function () {
                    return [this.classaArray, this.classaArray2]
                }
            }
        })
    </script>
</body>

</html>

復制

全國[切換]∨

首頁

找工作

找人才

找兼職

查企業

查工資

看趨勢

職場知識

百科

更多>

2. Vue語法--插值操作&動態綁定屬性

小編:管理員 113閱讀 2022.08.18

關聯標簽：

QQ客服

E-mail:market#hunt007.cn

2. Vue語法--插值操作&amp;動態綁定屬性

小編:管理員 113閱讀 2022.08.18

關聯標簽：

QQ客服

E-mail:market#hunt007.cn

2. Vue語法--插值操作&動態綁定屬性