Vue教程之样式处理
本文我们来介绍下在Vue中针对样式处理这块的支持
Vue样式处理
一、class
我们首先来看下class属性的使用。
1.基本的class使用
我们先来看下非vue情况的class的使用，如下:
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <script src=”./lib/vue-2.4.0.js”></script> <style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style></head><body> <div id=”APP”> <h1 class=”red thin”>vue中的样式设置1</h1> </div> <script> var vm = new Vue({ el:”#app”, data:{ }, methods:{ } }) </script></body></html>效果
在这里插入图片描述
2.绑定数组
在这里插入图片描述
效果
在这里插入图片描述
3.三目运算
在绑定的数组中我们还可以通过三目运算来实现简单的逻辑，如下
在这里插入图片描述
效果如下:
在这里插入图片描述
通过效果也可以看出来随着flag的改变，效果也不一样咯~
4.数组中使用对象
上面例子中的三目运算符我们可以替换为对象，效果是一样的。
在这里插入图片描述
效果
在这里插入图片描述
5.绑定数组
上面都是将数据和view写在一块了，我们也可以将数据直接写在vm中，如下:
在这里插入图片描述
效果演示:
在这里插入图片描述
通过演示也可以看到，通过绑定对象也是可以的。完整代码如下:
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <script src=”./lib/vue-2.4.0.js”></script> <style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style></head><body> <div id=”app”> <!–基本使用–> <h1 class=”red thin”>vue中的样式设置1</h1> <!–通过v-bind 绑定数组 v-bind 可简写为 ‘:’–> <h1 v-bind:class=”[‘red’,’thin’]”>vue中的样式设置2</h1> <h1 :class=”[‘red’,’thin’]”>vue中的样式设置3</h1> <!–绑定的数组中添加 三目逻辑–> <h1 :class=”[‘red’,’thin’,flag?’active’:”]”>vue中的样式设置4</h1> <!–绑定的数组使用对象–> <h1 :class=”[‘red’,’thin’,{‘active’:flag}]”>vue中的样式设置5</h1> <!–绑定一个vm中的对象–> <h1 :class=”classObj”>vue中的样式设置6</h1> </div> <script> var vm = new Vue({ el:”#app”, data:{ flag:true, classObj:{red:true,thin:true,italic:false,active:false} }, methods:{ } }) </script></body></html>
二、style
我们除了可以通过使用class来引用样式外，我们还可以通过style来直接指定样式，Vue也支持此操作，具体如下:
单个style引用
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <script src=”./lib/vue-2.4.0.js”></script></head><body> <div id=”app”> <!– 对象就是无序键值对的集合 –> <h1 :style=”styleObj1″>这是一个h1</h1> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: ‘#app’, data: { styleObj1: { color: ‘red’, ‘font-weight’: 200 } }, methods: {} }); </script></body></html>效果
在这里插入图片描述
多个style引用
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <script src=”./lib/vue-2.4.0.js”></script></head><body> <div id=”app”> <!– 对象就是无序键值对的集合 –> <h1 :style=”styleObj1″>这是一个h1</h1> <h2 :style=”[ styleObj1, styleObj2 ]”>这是一个h2</h2> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: ‘#app’, data: { styleObj1: { color: ‘red’, ‘font-weight’: 200 }, styleObj2: { ‘font-style’: ‘italic’ } }, methods: {} }); </script></body></html>效果:
在这里插入图片描述
好了，针对Vue中对样式的使用就介绍到这儿，如果不清楚地欢迎留言探讨~
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126479.html
starterknow