持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情
动态指令参数
指令的参数可以是动态的。例如，在
v-mydirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
例如我们想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：
<template>
<div id="app">
<div id="baseexample">
<p>xiao_kai</p>
<p v-pin="200">xiao_kai固定在窗口上距离上方200px</p>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
directives: {
pin: {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
el.style.top = binding.value + 'px'
}
}
}
}
</script>
运行结果：
对象字面量
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。
代码演示：
<template>
<div id="app">
<div v-demo="{ backgroundColor: 'red', height: '90',width:'90' }"></div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
directives: {
demo: {
bind: function (el, binding) {
el.style.backgroundColor = binding.value.backgroundColor
el.style.height = binding.value.height + 'px'
el.style.width = binding.value.width + 'px'
}
}
}
}
</script>
运行结果：
vue指令的使用方法已经介绍完了，常用的指令就是v-if、v-for、v-on、v-bind、v-model
有不清楚的可以去看看之前的文章：
下期开始讲计算机属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
感谢观看 有什么不足欢迎评论区指出哦!!!!!!!!!!!!!
