vue指令（2）

• 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" href="http://wwww.baidu.com" 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>

运行结果