本文我们来介绍下在Vue中针对样式处理这块的支持
我们首先来看下class属性的使用。
我们先来看下非vue情况的class的使用,如下:
<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>Documenttitle>
<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中的样式设置1h1>
div>
<script>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
}
})
script>
body>
html>
效果
效果
在绑定的数组中我们还可以通过三目运算来实现简单的逻辑,如下
效果如下:
通过效果也可以看出来随着flag的改变,效果也不一样咯~
上面例子中的三目运算符我们可以替换为对象,效果是一样的。
效果
上面都是将数据和view写在一块了,我们也可以将数据直接写在vm中,如下:
效果演示:
通过演示也可以看到,通过绑定对象也是可以的。完整代码如下:
<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>Documenttitle>
<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中的样式设置1h1>
<h1 v-bind:class="['red','thin']">vue中的样式设置2h1>
<h1 :class="['red','thin']">vue中的样式设置3h1>
<h1 :class="['red','thin',flag?'active':'']">vue中的样式设置4h1>
<h1 :class="['red','thin',{'active':flag}]">vue中的样式设置5h1>
<h1 :class="classObj">vue中的样式设置6h1>
div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true,
classObj:{red:true,thin:true,italic:false,active:false}
},
methods:{
}
})
script>
body>
html>
我们除了可以通过使用class来引用样式外,我们还可以通过style来直接指定样式,Vue也支持此操作,具体如下:
<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>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<h1 :style="styleObj1">这是一个h1h1>
div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 }
},
methods: {}
});
script>
body>
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>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<h1 :style="styleObj1">这是一个h1h1>
<h2 :style="[ styleObj1, styleObj2 ]">这是一个h2h2>
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中对样式的使用就介绍到这儿,如果不清楚的欢迎留言探讨~