vue常见指令

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue常见指令，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1021字，纯文字阅读大概需要2分钟。

内容图文

vue常见指令

1.v-bind ：属性绑定

1. v-on :事件绑定
2. v-if :条件渲染，执行标签的创建和销毁，使用于不会频繁显示隐藏的标签
3. v-show : 条件渲染，执行标签的显示和隐藏，适用于频繁显示和隐藏
4. v-text : 渲染标签文本 (类似于JS中的inneText)
5. v-html：渲染标签字符串 (类似于JS中innerHtml)
6. v-once : 数据只在初始化时渲染一次 , 不会重复渲染
7. v-for :循环

<ol>
	<li v-for="item in 5">{{item}}</li>
	<li v-for="i,item in 5">{{item}}-{{i}}</li>
            <!-- 循环数组 -->
            <li v-for="item in list">{{item}}</li>
            <!-- 循环json数组 -->
            <li v-for="item,i in Array">{{i}}-{{item.age}}</li>
            <!-- template 是vue提供的一个模板标签,可用于包括多个子标签,不会被dom渲染 -->
            <template v-for="item,i in list">
                <li>{{i}}</li>
                <li>{{item}}</li>
            </template>
</ol>

9.自定义指令 Vue.directive()

<span v-red>123</span>
   <p v-red>456</p>
<script>
 //Vue.directive()自定义指令,第一个参数是指令名,第二个参数是指令配置
 Vue.directive("red",{
            //created 会在自定义指令添加到标签上时执行
            inserted(e){
                // 参数e指向自定义指令所在的表签
                console.log(e);
                e.style.color = 'red',
                e.innerText = "这是一个红色的标签"
            }
            
        })
  </script>

内容总结

以上是互联网集市为您收集整理的vue常见指令全部内容，希望文章能够帮你解决vue常见指令所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---