- 今天的课程分为五个小部分
- (1)v-bind回顾
- (2)class-对象语法
- (3)class-数组语法
- (4)内联样式style-对象语法
- (5)内联样式style-计算属性语法
前言
- DOM元素经常动态绑定一些类名或者style样式,本节讲解下使用 v-bind指令绑定class与style的多种方法。
- 之前介绍过v-bind基本用法及语法糖,主要用于动态更新HTML 元素属性,接下来简单回顾下。
1.v-bind回顾
- v-bind动态属性:常用于动态绑定HTML元素的属性,例如id、class、href、src等属性。改变任一方数据后都会实时更新。
- 语法格式1:单个语法格式
- v-bind:attributeName=variable
<div class="app">
<a
v-bind:class="classFn"
v-bind:title="titleFn"
v-bind:href="hrefFn"
v-bind:target="targetFn"
>
{{text}}
</a>
</div>
<script type="text/javascript">
//语法格式1:单个语法格式
var app = new Vue({
el:'.app',
data:{
classFn:'aName',
titleFn:'百度',
hrefFn:'http://www.baidu.com',
targetFn:'_blank',
text:'百度一下'
}
})
</script>
- 语法格式2:对象语法格式
- v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
案例:在页面中利用Vue实例的变量制作一个超级链接
- v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
<div class="app">
<a v-bind="{class:link.class,title:link.title,href:link.href,target:link.target}">
{{link.info}}
</a>
</div>
<script type="text/javascript">
//语法格式2:对象语法格式
var app = new Vue({
el:'.app',
data:{
link:{
class:'aaa',
title:'百度',
href:'http://www.baidu.com',
target:'_blank',
info:'百度'
}
}
})
</script>
- 语法格式3:数组语法格式”绑定类名”
- v-bind:attributeName=“[variable1,variable2,……]”
- 案例(绑定类名):
<div class="app">
<a v-bind:class='[class1,class2,class3]' :href="hrefFn">{{info}}</a>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
info: '百度一下',
class1: 'a1',
class2: 'a2',
class3: 'a3',
hrefFn: 'http://www.baodu.com'
}
})
</script>
class-对象语法-单类名切换
- 给v-bind:class设置一个对象,可以动态切换class。
- 语法:传给 v-bind:class 一个对象,以动态地切换 class:
<div :class="{active:isActive}"
data: {
isActive:false,
}
isActive为true时,结果为下图:
isActive为false时,结果为下图:
上面案例中,类名active依赖于数据isActive。当其值为true时,div拥有该类名active,为false时则没有
class-对象语法-多类名切换
- 除了单个类名切换,在对象中也可以传入多个属性来动态切换多个 class。例如:
<div class="demo">
<div :class="{active:isActive,pei:jiajing,zuo:mengjia}"></div>
</div>
<script type="text/javascript">
var demo = new Vue({
el: '.demo',
data: {
isActive:false,
jiajing:true,
mengjia:true
}
})
</script>
- v-bind:class 指令也可以与普通的 class 属性共存,例如
class=app和其他类名共存
<div class="demo">
<div class='app' :class="{active:isActive,pei:jiajing,zuo:mengjia}"></div>
</div>
<script type="text/javascript">
var demo = new Vue({
el: '.demo',
data: {
isActive:false,
jiajing:true,
mengjia:true
}
})
</script>
绑定的数据对象不必都定义在模板里,也可以用一个大对象包裹起来,例如:
<div class="demo">
<div :class="classObject"></div>
</div>
<script type="text/javascript">
var demo = new Vue({
el: '.demo',
data: {
classObject: {
jiajai: true,
huihui: true,
jiaojiao: true
}
}
})
</script>
对象包裹形式优点:如果需要添加一个class时,只需要在变量里添加属性,并设置该属性为true即可,所以相对来说更加自由。
- 点击按钮,虽然原本itsClass这个变量并没有red这个属性,但后续添加这个属性也会在该div里添加red这个class类名。如下图:
当:class的表达式过长或者逻辑复杂时,可以绑定计算属性,这是一种友好且常见的语法。如下图:
当需要应用多个class时,可以使用数组语法,给class绑定一个数组,应用一个class列表,例如。
class-数组语法-表达式1
- 可以使用三元/目运算符来根据条件切换class,例如
class-数组语法-表达式2
案例2:例如下图:
首先它是数组,因此第一个g存在,因此有样式名fontGreen;
其次,是一个三元表达式,会判断r的值,如果为true(或隐式转换为true),那么就绘将r的值添加到数组,否则添加s的值。
当class为多条件时,三元表达式写法较为繁琐,可以在数组里嵌套对象,使用对象写法,如下。
class-数组语法-数组对象嵌套
当class为多条件时,三元表达式写法较为繁琐,可以在数组里嵌套对象,使用对象写法,如下。
class-数组语法-计算属性
- 与对象语法一样,当:class的表达式过长或者逻辑复杂时,可以绑定计算属性computed,这是一种友好且常见的语法。
- 使用计算属性给元素动态设置类名,在业务里经常遇到,尤其在表达式较长或者逻辑复杂时,推荐使用计算属性。
内联样式style-对象语法
- v-bind:style 的对象语法十分直观,看着非常像 CSS,但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
内联样式style-对象包裹语法
- 这样会让模板更加清晰
内联样式style-计算属性语法
- 也可以用计算属性用法绑定
以上就是v-bind类名与样式绑定的分析,有问题留言小编,嘿嘿