vue.js 教程(七)改变样式的魔术棒v-bind

离上一篇的for loop又隔了一段时间(擦汗),除了思考要说什么以外,也忙了一堆不知道在忙什么的事,不过我一直都没有忘记我的教学还没写完……我想,应该也是我觉得我太忙了,所以我才每年都没参加铁人赛吧(摇头)。

如果你会做网页(我是指前端的部分),那你一定知道HTML一定要搭配一个叫CSS的东西才能让版面变漂亮、变好看,问题是我如果我用了vue.js,我要怎么改变我的配色?比方说要提醒的东西就要上红色、警告的东西就要上黄色、只是一般普通讯息就要上绿色的这种红绿灯讯息,我要怎样才能在同一个按钮或同一个Div内透过vue.js的运算就做到更换的效果?

这个时候我就不得不来说一下v-bind这个东西了,v-bind是vue.js里负责改变配色、大小等等所用的属性,也就是说v-bind就是针对css而存在的属性,而这样的属性会有什么样的属性值呢?在讲属性值之前,我们要来认识一下v-bind的副属性,也就是v-bind:style与v-bind:class!

如果你对css很熟,你一定会知道所谓的行内样式style=”OOXX”,还有id与class样式,当然由于id有不重复性,为了让css可以更有效率,现在都会提倡大家用class,也因为如此,只有v-bind:class这个部分是比较特别的,可能稍微需要用一下大脑的记忆体。

首先我们先来看看v-bind:style怎么用,其实用法还挺简单的,属性值里面就直接写行内样式,但是样式的数值,比方说颜色或文字大小,我们就可以设定在vue的data,这样我们就可以直接带进画面,范例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id="app">
<div v-bind:style="{ color: myColor, fontSize: myFontSize + 'px' }">123</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myColor: 'red',
myFontSize: 30
}
});
</script>
</body>
</html>

如果你有跟着前面的教学一路学过来,我相信到这里一定难不倒你,因为只是把data里面的变数直接带进去而已。当然我们现在我们在coding的时候一定要讲求维护性,最好是不要改HTML只改CSS或是不要改HTML或CSS我们直接改js,所以我们换个比较好维护的写法:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id="app">
<div v-bind:style="myStyle">123</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myStyle: {
color: 'red',
fontSize: '30px'
}
}
});
</script>
</body>
</html>

是的,我们只要在v-bind:style里面直接设定一个物件名称,然后就可以在vue的data里面直接透过物件去设定我们要属性值。在这里我们输入的css是文字变红并且文字变大成30px,简单、明了、好维护!但是只能满足我们基本需求,而且现在的网页很少会用行内样式啊!所以我们就来看看v-bind:class吧!

v-bind:class其实用法与写法上当然就比刚刚的v-bind:style简单,毕竟css部分我们都可以另外设定在css区域,日后要维护也是很容易,只要改css就好,不像刚刚好像把css混在js里,当然看起来就会简单很多。我们来看看范例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
<style>
.active{
color:red;
font-size: 30px;
}
</style>
</head>
<body>

<div id="app">
<div v-bind:class="{ active: myCheck }">123</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myCheck: true
}
});
</script>
</body>
</html>

是的!在这个范例里面我们很明显的可以看到,使用v-bind:class,我们只要判断这个class是不是要启用就可以了。像我大括号里面是写active:check,其中active就是我们的class名称,而myCheck则是我设定的变数名称。我在vue的data里面设定的true,意思就是启用这个class,所以当我们打开页面的时候,你就会看到123这行div被套上了一个叫active的class。

咦?既然可以设定true,那是不是也有false?那既然有true跟false,那我是不是可以设定很多个class?当然可以!你可以设定一连串的class名称都没有问题,因为重点在于要启用哪一个class对吧?那要怎么设定很多个class?我们简单范例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
<style>
.active{
color:red;
font-size: 30px;
}
.normal{
color:green;
font-size: 30px;
}
</style>
</head>
<body>

<div id="app">
<div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myCheck: false,
myCheck2: true
}
});
</script>
</body>
</html>

看到范例有没有觉得超简单?只要在大括号里面透过逗点连接,你就可以继续输入下一组class名称跟判断用的变数了,有没有超简单?你只要把myCheck与myCheck2的true跟false对调,套在123这个div的class,就会对调啰!

本篇教学就到这边,希望我能更快挤出时间写下一篇教学(点头)!

Author: bwh

发表评论