(十三)、绑定样式
1.原生状态绑定样式
我们的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>Document</title> <script src="../js/vue.js"></script> <style> .Jsxs { /* 设置盒子模型 */ border: 3px solid rgb(4, 3, 4); } .classA { /* 背景颜色 */ background-color: blueviolet } .classB { /* 字体颜色 */ color: rgb(233, 20, 20); } .classC { /* 字体阴影 */ text-shadow: 2PX 2PX 3PX yellow; } </style> </head> <body> <div id="root"> <!-- 1.我们原生情况下也可以绑定多个样式，即类可以设置多个 用空格进行隔开 --> <h1 class="Jsxs classA classB classC">{{title}}1</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { title: 'Hello, World!', myStyle: 'classA', hasB: true, // 是否用B hasC: true, // 是否用C size: 50 } }); </script> </body> </html>
2.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>Document</title> <script src="../js/vue.js"></script> <style> .Jsxs { /* 设置盒子模型 */ border: 3px solid rgb(4, 3, 4); } .classA { /* 背景颜色 */ background-color: blueviolet } .classB { /* 字体颜色 */ color: rgb(233, 20, 20); } .classC { /* 字体阴影 */ text-shadow: 2PX 2PX 3PX yellow; } </style> </head> <body> <div id="root"> <!-- 2.class的字符串写法，适应于类名不确定，要动态进行获取。 --> <h1 class="Jsxs" :class="myStyle">{{title}}2</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { title: 'Hello, World!', myStyle: 'classA', hasB: true, // 是否用B hasC: true, // 是否用C size: 50 } }); </script> </body> </html>
3.class样式绑定 (类绑定:不加引号)
利用类进样式绑定，类的key值是一个字符串可以省略不写
- 适应于: 类名确定(类名实际都是字符串’classB’==>可以简写为 classB)，但不确定用不用.
- {{}} 只解析表达式，将表达式转换成字符串。如果已经是字符串就不进行解析，原样输出。
<!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>Document</title> <script src="../js/vue.js"></script> <style> .Jsxs { /* 设置盒子模型 */ border: 3px solid rgb(4, 3, 4); } .classA { /* 背景颜色 */ background-color: blueviolet } .classB { /* 字体颜色 */ color: rgb(233, 20, 20); } .classC { /* 字体阴影 */ text-shadow: 2PX 2PX 3PX yellow; } </style> </head> <body> <div id="root"> <!-- 3.class的对象写法，适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用. 为什么在这里会自动去找data区域找hasB,而不是找classB？ （1）.因为找的是 变量 不是 字符串 --> <h1 class="Jsxs" :class="{classB:hasB,classC:hasC}">{{title}}3</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { title: 'Hello, World!', myStyle: 'classA', hasB: true, // 是否用B hasC: true, // 是否用C size: 50 } }); </script> </body> </html>
4.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>Document</title> <script src="../js/vue.js"></script> <style> .Jsxs { /* 设置盒子模型 */ border: 3px solid rgb(4, 3, 4); } .classA { /* 背景颜色 */ background-color: blueviolet } .classB { /* 字体颜色 */ color: rgb(233, 20, 20); } .classC { /* 字体阴影 */ text-shadow: 2PX 2PX 3PX yellow; } </style> </head> <body> <div id="root"> <!-- 4.class类名加上小括号 --> <h1 class="Jsxs" :class="{'classB':hasB,'classC':hasC}">{{title}}4</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { title: 'Hello, World!', myStyle: 'classA', hasB: true, // 是否用B hasC: true, // 是否用C size: 50 } }); </script> </body> </html>
5.class样式绑定 (三元表达式)
适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用.
- 这里面是否hasB被调用，假如说调用就使用classB,否则输出为空
<!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>Document</title> <script src="../js/vue.js"></script> <style> .Jsxs { /* 设置盒子模型 */ border: 3px solid rgb(4, 3, 4); } .classA { /* 背景颜色 */ background-color: blueviolet } .classB { /* 字体颜色 */ color: rgb(233, 20, 20); } .classC { /* 字体阴影 */ text-shadow: 2PX 2PX 3PX yellow; } </style> </head> <body> <!-- 1.绑定class样式 :class="xxx" xxx可以是字符串 对象 数组 2.绑定style样式 :style='{color: activeColor. fontSize: fontsize +'px'}' 其中activeColor/fontSize 是data属性 --> <div id="root"> <!-- 5.class三元表达式: 适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用 这里面是否hasB被调用，假如说调用就使用classB,否则输出为空 --> <h1 class="Jsxs" :class="hasB ? 'classB' : '' ">{{title}}5</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { title: 'Hello, World!', myStyle: 'classA', hasB: true, // 是否用B hasC: true, // 是否用C size: 50 } }); </script> </body> </html>
6.数组绑定样式
数组里面的变量如果不加引号，就是表达式。如果加上引号就是字符串
- 如果不添加引号，我们就要去寻找data区间
- 如果添加引号，我们就不用解析表达式，直接原样输出
<!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>Document</title> <script src="../js/vue.js"></script> <style> .Jsxs { /* 设置盒子模型 */ border: 3px solid rgb(4, 3, 4); } .classA { /* 背景颜色 */ background-color: blueviolet } .classB { /* 字体颜色 */ color: rgb(233, 20, 20); } .classC { /* 字体阴影 */ text-shadow: 2PX 2PX 3PX yellow; } </style> </head> <body> <!-- 1.绑定class样式 :class="xxx" xxx可以是字符串 对象 数组 2.绑定style样式 :style='{color: activeColor. fontSize: fontsize +'px'}' 其中activeColor/fontSize 是data属性 --> <div id="root"> <!-- 6.class数组的写法，适应于: 同时应用多个class. 数组里面的是变量. (1).如果是变量，那么我们就需要仅data进行查找，然后帮助我们解析成字符串 (2).如果自己是字符串，那么我们就不需要进行解析，直接返回字符串的信息 --> <!-- <h1 class="Jsxs" :class="[classA,classB,classC]">{{title}}6</h1> --> <!-- 转变为字符串 --> <h1 class="Jsxs" :class="['classA','classB','classC']">{{title}}6</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { title: 'Hello, World!', myStyle: 'classA', hasB: true, // 是否用B hasC: true, // 是否用C size: 50 } }); </script> </body> </html>
