VUE之样式操作
在数据绑定中，最常见得需求之二就是元素得样式名称class和内联style得动态绑定了，vue则使用v-bind指令来实现得；v-bind得基本用途事动态更新html元素上得属性,比如id或者class等等；
-
1. class对象绑定
给v-bind:class设置一个对象，可以动态得切换class；
<style>
.red {
color: red;
}
.show{
display: unset;
}
</style>
<body>
<div id="app">
<!-- 对象形式进行绑定时,当为false则代表不应用该属性,反之亦然。 -->
<!-- 还可以使用正常的class=类名来定制不变的类。 -->
<div :class="{red:status}" class="show">class绑定方式</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
status: true,
}
})
</script>
</body>
页面显示：
- :class等同于v-bind:class，是一个语法糖；
- :class可以与普通class共存得；
- 使用对象形式绑定得时候，当为true得时候，代表应用该属性；当为false得时候，代表不应用该属性；
- 样式red依赖与status，根据它来决定得；
- 对象也可以传入多个属性得，动态切换class；
<p :class=[变量1,变量2,"字符串"]>内容</p>
<!-- `注意，当数组内的元素没有加引号是会认为是一个变量，会去Vue实例中寻找` -->
<!-- `如果数组内的元素加上引号，则被认位是一个字符串` -->
<style>
.show{
display: unset;
}
</style>
<body>
<div id="app">
<p :class=[actives,color,'show']>class绑定方式</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
actives: "active",
color: "red",
}
})
</script>
</body>
也可以使用三元表达式来根据条件切换
<body>
<div id="app">
<p :class=[isActives?active:'','color']>class绑定方式</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isActives:true,
actives: "active",
color: "color",
}
})
</script>
</body>
class有多个条件时候可以在数组中使用对象语法；
<body>
<div id="app">
<p :class=[{'active'：isActives}'color']>class绑定方式</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isActives:true,
color: "color",
}
})
</script>
</body>
直接在自定义组件上使用class或者:class，样式规则会直接应用到这个组件得根元素上面；
Vue.componemt('my-componemt',{
template:'<p :class="active">class绑定方式</p>'
});
在调用这个组件得时候，给组件绑定class
<div id="app">
<my-componemt :class="{'show'：isActives}"></my-componemt>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isActives:true,
}
})
</script>
最后渲染为:<p class="active show">class绑定方式</p>
- 2. style对象绑定
通过v-bind与对象，动态绑定标签的style属性。
它有两种书写style的方式，一种是驼峰式，一种是通过-来进行链接。
<!-- 准备好一个容器-->
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'子鱼',
mood:'normal',
classArr:['ziYu1','ziYu2','ziYu'],
classObj:{
ziYu1:false,
ziYu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
"vue.js实战"・等 学习笔记总结
