Vue学习笔记:绑定class与style样式
2018/7/18 16:31:14

本文总结一下如何用v-bind绑定class及style样式的方法,请注意v-bind可以用:来代替,这是简写方法

1.绑定对象的写法
   <div id="app">        <div :class="{active:isActive,hover:isHover}">只要付出,就有收获</div>    </div>
       new Vue({            el: "#app",            data: {                isActive: true,                isHover: true            }        })

结果为:

<div class="active hover">只要付出,就有收获</div>
2.绑定数组的写法
<div id="app">    <div :class="[isActive,isHover]">只要付出,就有收获</div> </div>
new Vue({ el: "#app", data: { isActive: "active", isHover: "hover" } })

结果为:

<div class="active hover">只要付出,就有收获</div>
3.绑定json的写法
<div id="app">    <div :class="json">只要付出,就有收获</div> </div>
new Vue({    el: "#app",    data: {        json:{            active:true,            hover:false        }    }, })

结果为:

<div class="active">只要付出,就有收获</div>
4.三元表达式写法
<div id="app"><div :class="isRed?'red':'green'" >只要付出,就有收获</div></div>
   new Vue({        el: "#app",        data: {            isRed:true        }    })

结果为:

<div class="red">只要付出,就有收获</div>
5.内联样式写法一
<div id="app">    <div :style="{color:isColor,fontSize:isSize,textShadow:shadow}">只要付出,就有收获</div> </div>
new Vue({    el: "#app",    data: {        isColor: "red",        isSize: "16px",        shadow: '5px 2px 6px #000'    } })

结果为:

<div style="color: red; font-size: 16px; text-shadow: rgb(0, 0, 0) 5px 2px 6px;">只要付出,就有收获</div>
6.内联样式写法二,和上面的写法的区别是上面的先变成了对象,而这个写法是直接绑定到一个样式对象
<div id="app">    <div :style="object">只要付出,就有收获</div> </div>
new Vue({    el: "#app",    data: {        object:{            color: 'red',            fontSize: '16px',        }    } })

结果为:

<div style="color: red; font-size: 16px;">只要付出,就有收获</div>
7.最后再补充一下绑定src的写法
<div id="app">    <img :src="imgUrl"> </div>
new Vue({        el: "#app",        data: {            imgUrl: 'img.png'        }    })

结果会显示出来对应路径的图片

结语:这些都是基本的知识,我目前就总结了这些,如果还有请补充一下,一起共同成长。

下一条:没有了

猜你喜欢

发表评论

标签云
返回顶部图片