打赏

6.自定义私有指令

1.自定义私有指令:

<div id="app2">
 <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
</div>

实现:

var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {},
      directives: { // 自定义私有指令
        'fontweight': { // 设置字体粗细的(第一种写法)
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },
        'fontsize': function (el, binding) { // 注意:这个 function 等同于把代码写到了 bind 和 update 中去(第二种写法)
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }
})

 

posted @ 2019-01-09 18:01  QueryMarsBo  阅读(325)  评论(0编辑  收藏  举报