[笔记][Vue.js]打开Vue.js世界的大门(8)-用Vue来玩转style！

嗨！大家好！最近都维持着两三天就一篇文章的频率，说实在有点累人XD，不过年底就要到了很多事情都还没有一个着落，突然觉得有点着急，才想说加紧个脚步

昨天我们说了class的部分，今天来玩style吧！

大家应该都知道，style属性的值会是CSS，而CSS这个语法是由一个样式去配上我们要设定给他的值为一组，例如如果要设定背景颜色为红色可以这么写「background-color:red」，由一个代表背景颜色的background-color配上要设定的颜色red，这个写法是不是很像JavaScript中的物件？我们透过昨天的例子，来看Vue怎么玩转style。
HTML

<div id="messageVue">    <!--直接使用v-bind:style给定一个物件，        物件内陈述CSS语法-->    <span :style="{color:'red',font-weight:'bold'}">        {{message}}    </span></div>

JavaScript

let messageData = {    message : '这里是警告文字！',}let messageVue = new Vue({    el:'#messageVue',    data:messageData,})

结果应该...是什么都没有对吧！我们看一下console：

错误的地方有用白色的框框标记起来了！问题出在{color:'red',font-weight:'bold'}身上，这时候再回去详读官方文件！

重点用红线标起来了，原来是因为物件中无法使用-减号，所以Vue他支援驼峰命名法(详情可以参考这里)，也就是说我把font-weight:'bold'改成fontWeight:'bold'，或是保留减号但是把样式名称加上单引号的'font-weight':'bold'都可以搞定这个错误！来修正上方的HTML吧！
HTML

<div id="messageVue">    <!--直接使用v-bind:style给定一个物件，        物件内陈述CSS语法，如果样式名称有减号可以採驼峰式命名法处理。-->    <span :style="{color:'red',fontWeight:'bold'}">        {{message}}    </span></div>

如此一来，效果和绑定的文字就出现了！而既然他是使用物件操控style，那我们也可以实现用变数去控制那个属性的值，像以下的做法：
HTML

<div id="messageVue">    <!--color指定为后方data的textColor属性值-->    <span :style="{color:textColor,fontWeight:'bold'}">        {{message}}    </span></div>

JavaScript

let messageData = {    message : '这里是警告文字！',    //在这里用textColor属性存着文字的颜色    textColor : 'red',}let messageVue = new Vue({    el:'#messageVue',    data:messageData,})

会得到一样的结果：

而大家还记得，Vue是个会动态做繫结的前端框架(每次都在讲XD)，所以当我去改变textColor的值时，前面的画面也会跟着改变：

当然官方文件也说把设定好style的物件存在JavaScript，让:style直接绑定一个物件属性会更好，下方整理过后的结果会和上方例子一样：
HTML

<div id="messageVue">    <!--直接绑定textStyle属性物件-->    <span :style="textStyle">        {{message}}    </span></div>

JavaScript

let messageData = {    message : '这里是警告文字！',    //把要设定的样式都存放在textStyle属性    textStyle : {        color : 'red',        fontWeight : 'bold',    },}let messageVue = new Vue({    el:'#messageVue',    data:messageData,})

但有时候我们会有许多一组一组的style物件，如果我们要绑定多个style物件的话，可以使用阵列设定多个物件，如下：
HTML

<div id="messageVue">    <!--使用阵列同时绑定两个设定好样式的物件-->    <span :style="[textStyle,textThrough]">        {{message}}    </span></div>

JavaScript

let messageData = {    message : '这里是警告文字！',    textStyle : {        color : 'red',        fontWeight : 'bold',    },    //新增一个删除线的样式物件    textThrough : {        textDecoration : 'line-through'    },}let messageVue = new Vue({    el:'#messageVue',    data:messageData,})

结果会同时出现两个物件都有的属性，这样在实务上也能够更弹性的设定CSS：

什么？你说这样还不够弹性？把阵列写在标籤上不能控制内容？欸嘿嘿！这时候有个Vue属性非常适合来处理这件事情，就是computed计算属性！感觉自从学了他以后，几乎每一篇文章都会提到他XD，这个使用率真的只有高而已，那再整理一下上方的程式码吧！
HTML

<div id="messageVue">    <!--修改成绑定计算器的属性-->    <span :style="arrTextStyle">        {{message}}    </span></div>

JavaScript

let messageData = {    message : '这里是警告文字！',    textStyle : {        color : 'red',        fontWeight : 'bold',    },    textThrough : {        textDecoration : 'line-through'    },}//新增计算属性let messageComputed = {    //回传需要设定的style物件阵列    arrTextStyle : () => {        return [messageData.textStyle,messageData.textThrough]    }}let messageVue = new Vue({    el:'#messageVue',    data:messageData,    //设定计算属性    computed:messageComputed,})

像上方的做法是不是相对的弹性许多了，虽然目前的画面还是像上面的例子一样，但是在实务上运用时，就可以从arrTextStyle里面去判断许多情况，再来决定是否要把messageData中设定好的style物件放进阵列回传。

最后的PS时间，因为每个浏览器对style的值可能不同，就有分不一样的前缀，关于前缀的详细说明可以参考这篇文章，所以Vue提供了一个style他的value可以是包含多个值的阵列，这边直接拿官方文件的範例，因为我不是前端设计师没有了解的很深入
HTML

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

上方display对应到的值是一个阵列，这时候浏览器会从-webkit-box开始，如果不支持这个前缀的话，就会继续设定成下一个索引的值，当所有都不支援则设定成最后一个索引的flex，繫结过后的结果就变成:style="{ display: 'flex' }"。

好的，那下一篇应该会再更仔细的说明Vue的事件绑定，因为刚刚看了文件感觉还满多的XD，最后感谢大家的观看！如果文章中有解释不清楚，或是小弟理解错误的地方，还麻烦各位大大留言告诉我，我会再尽快修正或补充！谢谢大家！