您现在的位置是：首页 > 前端学习 > VueVue

Vue自定义指令(第三节)(图文)

第十三双眼睛2022-04-25【Vue】人已围观

简介自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
指令也分为全局指令和局部指令，全局指令就是在项目里任何地方都能使用，局部指令只能在指令所属的实例中使用
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<div id="app">
           <input type="text" v-focus />
</div>
<script>
       // 注册一个全局自定义指令 v-focus
       Vue.directive('focus', {
       // 当绑定元素插入到 DOM 中。
       inserted: function (el) {
       // 聚焦元素
       el.focus()
       }
       })
       // 创建根实例
       new Vue({
       el: '#app'
       })
</script>

上面的指令没有带任何参数,下面根据指令的值来设置元素的背景颜色

<div id="app">
           <input type="text" v-color='color' />
       </div>
       <script>
       Vue.directive('color',{
           bind:function(el,binding){
               el.style.backgroundColor=binding.value.value
           }
       })
       // 创建根实例
       new Vue({
       el: '#app',
       data: {
           color:{
               value: 'blue'
           }
       }
       })
</script>

上面我们定义的是全局指令，下面我们定义局部指令

<div id="app">
           <input type="text" v-age="person"/>
       </div>
       <script>
       // 创建根实例
       new Vue({
       el: '#app',
       data: {
           person: {
               age: 10
           }
       },
       directives:{
           age:{
               bind:function(el,binding){
                   el.value=binding.value.age
               }
           }
       }
       })
</script>

Tags：

很赞哦！ ()

上一篇：Vue组件(第二节)(图文)

下一篇：Vue第四节(图文)