属性渲染

　　 关于标签的属性渲染统一使用v-bind属性指令，比如轮播图的src全部经过后端获得，所以我们需要对src属性做动态渲染。

基本使用

　　 使用v-bind属性指令，动态绑定图片的地址。

　　image-20200924145003085

<body>
    <main id="id-1">
        <img v-bind:src="imgSrc">
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            imgSrc: "./1.jpg",
        }
    })
</script>

简写形式

　　 可以直接使用:进行简写。

<body>
    <main id="id-1">
        <img :src="imgSrc">
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            imgSrc: "./1.jpg",
        }
    })
</script>

class对象

　　 我们可以通过v-bind与对象，动态绑定标签的class属性。

　　 注意它的格式是这样的：

<div :class={c1:true,c2:false,c3:true}>内容</div>

　　 当class中的某一个对象的属性为true时，则代表该class被添加。

　　 并且我们还可以使用正常的class=类名来定制不变的类。

　　v-bindClassObject

<body>
    <main id="id-1">
        <div :class={c1:isC1,c2:isC2,c3:isC3} class="show">内容</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            isC1:true,
            isC2:false,
            isC3:true,
        }
    })
</script>

class数组

　　 添加class除开可以用对象的形式，也可以使用数组。

　　 不过数组使用很少，一般不怎么用。

　　 它的语法格式如下：

<div :class=[c1,c2,c3]>内容</div>
<!-- 注意，当数组内的元素没有加引号是会认为是一个变量，会去数据层寻找 -->
<!-- 如果数组内的元素加上引号，则被认位是一个字符串 -->

　　

　　 下面是不加引号，当作变量去寻找。

　　image-20200924150848738

<body>
    <main id="id-1">
        <div :class=[c1,c2,c3] class="show">内容</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            c1:"c1Style",
            c2:"c2Style",
            c3:"c3Style",
        }
    })
</script>

　　

　　 下面是加引号，直接会作用于标签本身。

　　image-20200924150951650

<body>
    <main id="id-1">
        <div :class=['c1','c2','c3'] class="show">内容</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            c1:"c1Style",
            c2:"c2Style",
            c3:"c3Style",
        }
    })
</script>

style对象

　　 我们可以通过v-bind与对象，动态绑定标签的style属性。

　　 它有两种书写style的方式，一种是驼峰式，一种是通过-来进行链接。

　　 注意它的格式是这样的：

<div :style={color:"red",fontSize:"12px",backgroundColor:bgColor}>内容</div>
<!-- 注意!最后的background没有添加单引号，这使得bgColor会当作变量去数据层中获取 -->

　　image-20200924152242697

<body>
    <main id="id-1">
        <div :style={color:"red",fontSize:"12px",backgroundColor:bgColor}>内容</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            bgColor: "green",
        }
    })
</script>

style数组

　　 除开可以使用对象语法绑定style属性，也可以通过数组语法进行绑定。

　　 数组中的元素必定要是数据层中的数据。

　　image-20200924152610366

<body>
    <main id="id-1">
        <div :style=[fSize,color]>内容</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            fSize:{"fontSize":"16px"},
            color:{"backgroundColor":"green","color":"white"},
        }
    })
</script>

版权声明：本文为Yunya-Cnblogs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Yunya-Cnblogs/p/13734697.html