Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.6　v-bind指令

v-bind指令主要用于属性绑定，Vue官方提供了一个简写方式“：bind”。语法示例代码如下：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-bind绑定的属性包括：class属性、style属性、value属性、href属性等，只要是属性，就可以用v-bind指令进行绑定。

以下实例判断xianshi的值，如果为true，则使用bjheise类的样式，否则不使用该类。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模板语法-属性绑定 v-bind 指令</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
    <!--内部样式定义-->
    <style>
        /*定义黑色的背景，白色的字*/
        .bjheise{
            background-color:black; /*黑色背景*/
            color: white;/*白色字*/
        }
    </style>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--label通过for的值和input的id值都是r1来绑定-->
        <label for="r1">设置黑色背景，白色字体</label>
        <!--选中input的时候会改变变量xianshi的值为true，然后下面就会调用样式bjheise-->
        <input type="checkbox" v-model="xianshi" id="r1">
        <br><br>
        
        <!--上面的input选中时，下面会显示黑色背景，白色的字-->
        <div v-bind:class="{'bjheise': xianshi}">
            v-bind:class 指令
        </div><br>
        
        <div class="bjheise">
            默认的样式；没有使用v-bind指令
        </div>        
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            //变量初始化，点击input的时候值会在true和false之间切换  
            xianshi:false 
        }
    })
    </script>
</body>
</html>

效果如图2-3和图2-4所示。

图2-3　页面运行默认效果

图2-4　勾选后运行v-bind：class的效果图

我们接下来再看看其他知识点：绑定一个属性、缩写、内联字符串拼接、class绑定、style绑定、绑定一个有属性的对象、通过prop修饰符绑定DOM属性、prop绑定、通过$props将父组件的props一起传给子组件，参考示例如下：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。prop必须在 my-component 中声明-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

第5章会详细详解如何绑定普通样式和内联样式。

上一章目录下一章