分别创建一个全局自定义指令v-word和一个局部自定义v-words,指令功能与v-text指令类似,它可以使绑定的值扩大100倍
时间: 2023-08-04 21:15:32 浏览: 56
创建全局自定义指令v-word:
```javascript
// main.js
import Vue from 'vue'
Vue.directive('word', {
bind: function (el, binding) {
el.textContent = binding.value * 100
}
})
```
使用:
```html
<template>
<div>
<span v-word="num"></span>
</div>
</template>
<script>
export default {
data () {
return {
num: 10
}
}
}
</script>
```
创建局部自定义指令v-words:
```html
<template>
<div>
<span v-words="num"></span>
</div>
</template>
<script>
export default {
directives: {
words: {
bind: function (el, binding) {
el.textContent = binding.value * 100
}
}
},
data () {
return {
num: 10
}
}
}
</script>
```
注意:局部自定义指令需要在组件中定义directives对象,全局自定义指令无需定义。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)