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>

巴特西

v-bind的使用

v-bind

v-bind的引入

动态绑定src属性

动态绑定class

①对象语法

②数组语法

动态绑定style

①对象语法

②数组语法

最新文章

热门文章