以下实例演示了这些参数的使用:

实例

<div id="app"  v-runoob:hello.a.b="message"></div> <script>Vue.directive('runoob', {  bind: function (el, binding, vnode) {    var s = JSON.stringify    el.innerHTML =      'name: '       + s(binding.name) + '<br>' +      'value: '      + s(binding.value) + '<br>' +      'expression: ' + s(binding.expression) + '<br>' +      'argument: '   + s(binding.arg) + '<br>' +      'modifiers: '  + s(binding.modifiers) + '<br>' +      'vnode keys: ' + Object.keys(vnode).join(', ')  } }) new Vue({  el: '#app',  data: {    message: '菜鸟教程!'  } })</script>

尝试一下 »

有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:

Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color})

指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:

实例

<div id="app">    <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div></div> <script>Vue.directive('runoob', function (el, binding) {    // 简写方式设置文本及背景颜色    el.innerHTML = binding.value.text    el.style.backgroundColor = binding.value.color }) new Vue({  el: '#app' })</script>

尝试一下 »