vue.js2.0学习(三)class与style的绑定
程序员文章站
2022-07-04 19:33:49
...
class与style绑定
通过v-bind指令来进行class与style的绑定
绑定HTML Class
1.对象语法
传给 v-bind:class 一个对象,以动态的切换class
<!-- 使用:v-bind:clas="{class名:条件}" -->
<!-- 例子: -->
<style>
.active{
background-color:red;
}
</style>
<div v-bind:class="{active:isActive}"></div>
<script>
new Vue({
el:"#app",
data:{
isActive:true
}
});
</script>
上面的例子中active这个class存在与否取决于数据属性isActive的布尔值
可以同时绑定多个class属性
例如:<div v-bind:class="{ active: isActive,top:hasError }"></div>
对象语法绑定class的另一种写法:
绑定的数据对象写在vue实例中
<!--例如: -->
<div v-bind:class="classObject"></div>
<script>
new Vue({
el:"#app",
data:{
classObject: {
active: true,
'text-danger': false
},
},
});
</script>
通过计算属性监听值的变化(返回一个对象)
实例:
<!-- HTML-->
<div v-bind:class="classObject"></div>
<script>
new Vue({
el:"#app",
data:{
isActive:true,
error:null
},
computed:{
classObject:function(){
return{
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type === 'fatal'
}
},
}
});
</script>
2.数组语法
将一个数组传递给 v-bind:class,以应用一个class列表
<!-- HTML-->
<div v-bind:class="[activeClass,errorClass]"></div>
<script>new Vue({
el:"#app",
data:{
activeClass:"active",
errorClass:"text-danger"
}
});
</script>
<!-- 渲染结果 -->
<div class="active text-danger"></div>
根据条件切换列表中的class,可以使用三元表达式:<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
3.用在组件上
当在一个组件上使用class属性时,这些样式会被添加到组件的根元素上面(根元素上已经存在的类不会被覆盖)
例子:
<!-- 使用组件 -->
<my-component class="test"></my-component>
<!-- 定义一个组件 -->
<script>
Vue.component("my-component",{
template:'<p class="bar foo">我的组件</p>'
});
new Vue({
el:"#app",
});
</script>
<!-- 渲染结果 -->
<p class="bar foo test">我的组件</p>
绑定内联样式
1. 对象语法
<!-- HTML -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
new Vue({
el:"#app",
data:{
activeColor:"red",
fontSize:30
}
});
</script>
上面的例子可以直接绑定到一个样式对象,如下:
<!-- HTML -->
<div v-bind:style="styleObject"></div>
<script>
new Vue({
el:"#app",
data:{
styleObject: {
color: 'red',
fontSize: '13px'
}
},
});
</script>
2.数组语法
将多个样式对象应用到同一个元素上
<!-- HTML -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<script>
new Vue({
el:"#app",
data:{
baseStyles: {
color: 'red',
fontSize: '13px'
},
overridingStyles{
background-color:"black",
}
},
});
</script>
3.自动添加前缀
当v-bind:style使用需要添加浏览器引擎前缀的 CSS 属性时,如transform,Vue.js 会自动侦测并添加相应的前缀。