v-bind的使用

v-bind

v-bind的引入

​ 内容的绑定可以通过mustache语法，而属性的绑定往往需要通过v-bind

• 如动态绑定img的src属性

• 如动态绑定div的class属性

• 如动态绑定li元素的style属性

动态绑定src属性

<div id="app">
    <img v-bind:src="imgURL" alt="">
    <!-- v-bind的语法糖写法：:，v-bind可以省略 -->
    <a :href="aHerf">百度一下</a>
</div>
<script type="text/javascript">
    const app = new Vue({
        el: "#app", 
        data: {
            imgURL: "img/15.jpg",
            aHerf: "http://www.baidu.com'>",
            message: "你好",
            isActive: true,
            isLine: true, 
            finalSize:'20px',
            baseStyles:{color:'red', backgroundColor:'green'}
        }
    })
</script>

动态绑定class

①对象语法

• <h2 :class="{类名1:boolean, 类名2:boolean, 类名3:boolean}"></h2>
  

• 语法说明：当类名为true时，就会将对应的类名添加到该元素的class中，不会覆盖原先的class

<style type="text/css">
    .active {
        color: red;
    }
    .line {
        text-decoration: underline;
    }
</style>

<div id="app">
    <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
</div>

• 如果觉得对象语法过于复杂，还可以把它封装为一个方法使用或计算属性

//封装为方法
<div id="app">
	<h2 :class="getClasses()">{{message}}</h2>
</div>
<script type="text/javascript">
      const app = new Vue({
            methods: {
                  getClasses() {
                        return {
                              active: this.isActive,
                              line: this.isLine
                        }
                  }
            }
      }）
</script>

// 封装为计算属性
<div id="app">
    <h2 :class="classes">{{message}}</h2>
</div>
<script type="text/javascript">
      const app = new Vue({
            computed: {
                  classes() {
                        return {
                              active: this.isActive,
                              line: this.isLine
                        }
                  }
            }
      })
</script>

②数组语法

• 如果始终要为某个属性绑定一个或多个类，可以使用数组语法

• 数组语法相对于对象语法更简洁，缺陷是一旦绑定后该类就会始终存在

<h2 :class="['active','line']">{{message}}</h2>

动态绑定style

①对象语法

• <h2 :style="{key（属性名1）:value（属性值1）, 属性名2:属性值2, 属性名3:属性值3}"></h2>
  

• 语法说明：为元素添加样式。属性名即为样式名，可用驼峰命名或中间添加连接符'-'命名

<div id="app">
    <!-- 30px必须加上单引号，否则会被当做变量解析而报错 -->
    <h3 :style="{fontSize:'30px'}">{{message}}</h3>
    <h3 :style="{fontSize:finalSize}">{{message}}</h3>

②数组语法

• 与class的数组语法类似

<h3 :style="[baseStyles]">{{message}}</h3>