• v-bind

用于屬性和樣式的綁定。

（1）縮寫

<!-- 綁定一個屬性 -->
<h2 v-bind:屬性名="屬性值"></h2>

<!-- 縮寫 -->
<h2 :屬性名="屬性值"></h2>

（2）綁定屬性

<div id="app">
    <a v-bind:id="vid" :class="vclass" :href="vhref" :title="vtitle">vue 多屬性綁定</a>
    <!-- <a id="myid" class="myclass"  title="mytitle">vue 多屬性綁定</a> -->
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            vid:"myid",
            vclass: "myclass",
            vtitle:"mytitle",
            vhref:"http://wwww.baidu.com"
        }
    })
</script>

以下：在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。

（3）綁定HTML Class（可以方便動態地切換 class）
栗子1：數組語法

<div id="app">
    <div v-bind:class="[activeClass, errorClass]">栗子1</div>
    <!--<div class="active text-danger">栗子1</div>-->
</div>

<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: 'text-danger'
            }
    })
</script>

栗子2：對象語法

<div id="app">
    <div v-bind:class="classObject">栗子2</div>
    <!--<div class="active">栗子</div>-->
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            classObject: {
                active: true,
                'text-danger': false//CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，要用單引號括起來) 
            }
        }
    })
</script>

注意：用在組件上，當在一個自定義組件上使用 class 屬性時，這些類將被添加到該組件的根元素上面。這個元素上已經存在的類不會被覆蓋。

（4）綁定內聯樣式
栗子1：數組語法

<div id="app">
    <h2 v-bind:style="[styleA, styleB]">{{message}}</h2>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            message: "多樣式綁定",
            styleA:{
                fontSize: '30px',
                color: 'blue'
            },
            styleB:{
                textDecoration: 'underline'
            }
        }
    })
</script>

栗子2：對象語法

<div id="app">
    <h2 v-bind:style="styleObject">{{message}}</h2>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            message: "多樣式綁定",
            styleObject: {
                color: 'red',
                fontSize: '18px'
                }
        }
    })
</script>

v-bind支持的修飾符：

v-bind支持的修飾符

• v-model

實現數據的雙向綁定，v-model 指令只能作用于 <input>、<textarea>、<select>等表單元素上。

栗子1：文本輸入

<div id="app">
    <p>單行文本：</p>
    <input v-model="message1" placeholder="單行文本">
    <p>當前輸入: {{ message1}}</p>

    <p>多行文本：</p>
    <textarea v-model="message2" placeholder="多行文本"></textarea>
    <p>當前輸入: {{ message2}}</p>
</div>

<script>
new Vue({
    el: "#app",
    data:{
        message1:'',
        message2:''
    }
})
</script>

栗子2：復選框

<div id="app">
    <p>單個復選框：</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <p>多個復選框：</p>    
    <input type="checkbox" id="iphone" value="iphone" v-model="checkedNames">
    <label for="iphone">iPhone</label>
    <input type="checkbox" id="xiaomi" value="xiaomi" v-model="checkedNames">
    <label for="xiaomi">小米</label>
    <input type="checkbox" id="huawei" value="huawei" v-model="checkedNames">
    <label for="huawei">華為</label>
    <span>選擇的值: {{ checkedNames }}</span>
</div>

<script>
new Vue({
    el: "#app",
    data:{
        checked: false,
        checkedNames: []
    }
})
</script>

栗子3：單選按鈕

<div id="app">
    <input type="radio" id="mingtern" value="mingtern" v-model="choosed">
    <label for="mingtern">mingtern</label>
    <br>
    <input type="radio" id="baidu" value="baidu" v-model="choosed">
    <label for="baidu">baidu</label>
    <br>
    <span>選中值為:{{ choosed }}</span>
</div>
 
<script>
new Vue({
    el: '#app',
    data: {
        choosed : 'mingtern'
    }
})
</script>

栗子4：select列表

<div id="app">
    <p>單選列表：</p>
    <select v-model="single">
        <option disabled value="">請選擇</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>選擇的值是: {{ single }}</span>
    
    <p>多選列表：</p>
    <select v-model="multiple" style="width:50px" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>選擇的值是: {{ multiple }}</span>    
    
    <p>動態列表：</p>
    <select v-model="dynamic">
        <option disabled value="">請選擇</option>
        <option v-for="item in items" v-bind:value="item.value">
        {{ item.text }}
        </option>
    </select>
    <span>選擇的值是: {{ dynamic }}</span>    
</div>
 
<script>
new Vue({
    el: '#app',
    data: {
        single : '',
        multiple: '',
        dynamic: '',
        items: [
            {text: 'first', value: 'A' },
            {text: 'second', value: 'B' },
            {text: 'third', value: 'C' }
        ]
    }
})
</script>

v-model支持的修飾符：

v-model支持的修飾符

• v-cloak

該指令會在關聯元素的所有vuejs變量編譯完成后才正常顯示。與[v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。

<style>
[v-cloak] {
  display: none;
}
</style>

<div v-cloak>
  {{ message }}
</div>

• v-once

使用 v-once 指令，表示只對關聯元素或組件進行一次渲染，隨后會被當做靜態內容跳過，不會再次渲染。

<div id="app">
    <h2 v-once>{{title}}</h2>
    <p>{{content}}</p>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    title: 'mytitle',
    content: 'mycontent'
  }
})
app.title = "標題不能改變";
app.content = "內容可以改變";
</script>

• v-pre

vue 實例化時會遍歷頁面所有節點，如果想跳過某些節點，可以在該節點中使用 v-pre 指令，編譯器會自動忽略該節點和其子節點。

<div id="app">
    <h4>三元運算表達式</h4>
    <span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        ok: true
    }
})
</script>

運行結果