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：新属性，用于计算，例如购物车的总和，平均数等。属性中不需要加括号
