您现在的位置是:首页 > 前端学习 > 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:

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计130篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们