目录
v-bind动态绑定class(对象语法)
如果对DOM元素的节点的class进行动态绑定,xuanzecidom是否有指定的class属性。例如:给h2标签加上class='active',当DOM中有class时,会变成白色,再写一个按钮绑定,点击过后变成黑色再次点击变成白色,类似于一个开关灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态绑定class</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.title{
background-color: rgb(235, 235, 160);
color: #000;
}
.active{
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<h2 class="title" :class="{active:isActive}">{{message}}</h2>
<button @click='change'>开关灯</button>
</div>
<script>
var box = new Vue({
el:'#box',
data:{
message:'我会变色',
active:'active',
isActive:true,
},
methods:{
change(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
效果如下图所示:
封装写法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态绑定class</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.title{
background-color: rgb(235, 235, 160);
color: #000;
}
.active{
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<h2 class="title" :class="{active:isActive}">{{message}}</h2>
<h2 class="title" :class="getClass()">{{message}}</h2> //封装起来
<button @click='change'>开关灯</button>
</div>
<script>
var box = new Vue({
el:'#box',
data:{
message:'我会变色',
active:'active',
isActive:true,
},
methods:{
change(){
this.isActive = !this.isActive;
},
getClass(){ //写在方法里
return {active:this.isActive}
},
}
})
</script>
</body>
</html>
效果和上图一致。
v-bind动态绑定class(数组用法)
class属性中可以放数组,会依次解析成对应的class。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind动态绑定class(数组用法)</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.aaa{
color: #f00;
}
.bbb{
background-color: bisque;
}
</style>
</head>
<body>
<div id="app">
<!-- 不加会被当成变量 --> <!-- 加上单引号当成字符串 -->
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="getStyle()">{{message}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
message:'你好啊',
active:'aaa',
line:'bbb',
},
methods:{
getStyle(){
return [this.active,this.line]
}
}
})
</script>
</body>
</html>
<h2 :class="[active,line]">{{message}}</h2> //变量
<h2 :class="['active','line']">{{message}}</h2> //字符串
这段代码[]中的值如果是加引号的话就会被当做字符串,如果要是不加引号的话就为变量
v-bind动态绑定style
v-bind动态绑定style(对象语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind动态绑定style</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:fontsize}">{{message}}</h2>
</div>
<script>
const vm = new Vue({
el:'#box',
data:{
message:'你好',
fontsize:'60px',
},
})
</script>
</body>
</html>
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:fontsize}">{{message}}</h2>
此处的样式属性必须是驼峰命名法,不可为font-size!
同上:如果是加引号的话就会被当做字符串,如果要是不加引号的话就为变量
v-bind动态绑定style(数组语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind动态绑定style</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h2 :style="[baseStyle]">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script>
const vm = new Vue({
el: '#box',
data: {
message: '你好',
baseStyle: { backgroundColor: 'red' },
},
methods: {
getStyle() {
return [this.baseStyle]
}
}
})
</script>
</body>
</html>
上方代码中的[]中的是数组,可以写多个
<h2 :style="[baseStyle]">{{message}}</h2>
计算属性的基本操作
如何去拼接两个字符串呢?
方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind动态绑定style</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 不加会被当成变量 -->
<!-- 加上单引号当成字符串 -->
<h2>{{firstName+'--'+lastName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{FullName}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
firstName: "Nan",
lastName: "chen"
},
methods: {
getFullName() {
return this.firstName + '--' + this.lastName
}
},
// 用于计算属性,比如购物车总价,属性中不需要加括号
computed: {
// FullName(){
// return this.firstName+'--'+ this.lastName
// }
FullName: function () {
return this.firstName + '--' + this.lastName
}
}
})
</script>
</body>
</html>
</body>
</html>
效果如图:
computed:新属性,用于计算,例如购物车的总和,平均数等。属性中不需要加括号