Vue自定义指令

// 按钮权限perssionState='false'时
<button v-perssion="perssionState">删除</button>&nbsp;
<button v-perssion="!perssionState">删除</button>
 <br>
// 股价展示
<span v-color="0.5">{{ price }}</span>&nbsp;
<span v-color="-0.5">{{ price }}</span>&nbsp;
<span v-color="0">{{ price }}</span>&nbsp;

// 自定义全局指令

// 权限按钮是否禁用
Vue.directive('perssion', {
  inserted(el, binding) {
    el.disabled = !binding.value
  }
})
// 股价展示背景色修改
Vue.directive('color', {
  inserted(el, binding) {
    const color = binding.value > 0 ?
      'red' : binding.value < 0 ?
        'green' : 'gray'
    el.style.backgroundColor = color
  }
})