如果我们想要要刚开始就调用，并且会跟随数据改变而改变，那么我们就要同时调用
bind 和
update 这两个钩子函数，但是两个钩子函数中的内容又是一样的，那么书写起来就很麻烦。那么我们可以这样写：
mmm: function(el , binding) {
if(binding.value.constructor === Object) {
Object.keys(binding.value).forEach(key => {
el.style[key] = binding.value[key];
})
}
},这样之后我们就可以达到那样的效果了。
书写一个类似于
v-bind:style 的效果的自定义指令
<div id="app">
<span v-mystyle='{color:color, fontSize:"20px"}'>v-mystyle的对象形式</span> <p v-mystyle='[style1 , style2]'>我使用的是v-mystyle的数组形式</p>
<button @click='changeStyle'>改变颜色</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
color: 'cyan',
style1: {color: 'lightblue'},
style2: {fontSize:"20px"}
},
directives: {
mystyle: function(el , binding) {
if(binding.value.constructor === Object) {
Object.keys(binding.value).forEach(key => {
el.style[key] = binding.value[key];
})
} else if(binding.value.constructor === Array) {
for(item of binding.value) {
for(key in item) {
el.style[key] = item[key];
}
}
}
},
},
methods: {
changeStyle() {
this.color = 'lightpink'
}
},
})
</script>
效果图：
补充：下面看下v-bind绑定style的几种方式
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>VUE --- V-BIND绑定STYLE的几种方式</TITLE>
</HEAD>
<BODY>
<DIV ID="APP1">
<DIV :STYLE="{'COLOR':COLOR,'FONTSIZE':SIZE+'PX'}">第一个示例</DIV>
</DIV> <DIV ID="APP2">
<DIV :STYLE="STYLES">第二种方式</DIV>
</DIV>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="HTTPS://UNPKG.COM/VUE/DIST/VUE.MIN.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
VAR APP1 = NEW VUE({
EL:'#APP1',
DATA:{
COLOR:'RED',
SIZE:15
}
