Vue指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/lql_h/article/details/102500097

本文深入探讨了Vue中的指令功能，包括v-text、v-html、v-if、v-else-if、v-else、v-show和v-for等，展示了如何利用这些指令进行高效的数据绑定和DOM操作，特别强调了它们在条件渲染和列表渲染中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。譬如在HTML页面中这样使用`<div v-xxx=''></div>`

在vue中v-xxx就是vue的指令

指令就是以数据去驱动DOM行为的,简化DOM操作

常用指令

- v-text 不可解析html标签

- v-html 可解析html标签

- v-if 做元素的插入（append）和移除（remove）操作

- v-else-if

- v-else

- v-show display:none 和display：block的切换

- v-for

- 数组 item，index

- 对象 value，key ，index

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div id="app"></div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

      

       new Vue({

           el:'#app',

           template:`

           <div>

                  <!--测试v-text-->

                  <div v-text='mytext'></div>

                  </hr>

                  <!--测试v-html-->

                  <div v-html='myhtml'></div>

                  <!--测试v-if  v-else-if  v-else-->

                  <button v-if='checkvif'>测试v-if2</button>

                  <button v-if='num==1'>测试v-if</button>                

                  <button v-else-if='num==2'>测试v-else-if</button>

                  <button v-else>测试v-else</button>



                 

                  <!--测试v-show-->

                  <div v-show='checkshow'>我是V-SHOW</div>

                  <!--循环数组-->

                  <ul>

                  <li v-for='(item,index) in arrayfor'>

                  {{ item }}-{{index}}

                  </li>

                  </ul>

                 

                  <!--循环数组-->

                  <ul>

                  <li v-for='item in arrayfor2'>

                  {{ item }}

                  </li>

                  </ul>



                  <!--循环对象-->

                  <ul>

                  <li v-for='(oj,key) in ojfor'>

                  {{key}}:{{oj}}

                  </li>

                  </ul>

           </div>

           `,

           data:function(){

              return {

                  mytext:'<h1>我这里是v-text</h1>',

                  myhtml:'<h1>我这里是v-html</h1>',

                  checkvif:true,

                  num:6,

                  checkshow:true,

                  arrayfor:['篮球','足球','乒乓球'],

                  arrayfor2:['篮球','足球','乒乓球'],

                  ojfor:{play:'篮球',people:'ming',age:'19'}

              }

           }

       })

    </script>

</body>

</html>