Vue的常见指令及用法案例

Vue会根据不同的标签指令，实现不同的功能。

指令：指的是带有v-前缀的的特殊标签属性。

我们常见的vue指令有：

1.v-html：类似于js中innerHTML，用于设置元素的HTML。案例如下：

 <div id="app">
     <div v-html="msg"></div>
     <div v-html="h"></div>
        
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
                msg: '<a href="https://www.baidu.com">百度</a>',
                h:'<h1>标签</h1>'
            }
        })
    </script>

注意如data里面属性的值为html标签注意用单引号括起来。

2.v-on:用来注册监听事件，为了方便编写v-on可用@代替。v-on有两种用法，一个是内联函数，当我们的处理逻辑简单是可以用内联函数，如下：

<div id="app">
       <button @click="count++">+</button>
       {{count}}
       <button @click="count--">-</button>
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
                    count:100
            },
            
        })
    </script>

 

 点击加按钮

 点击减按钮

第二种用发就是当我们的处理逻辑复杂时我们可以通过data里面的methods属性里面写我们的处理逻辑，案例如下：

 <div id="app">
       <button @click="fuadd()">+</button>
       {{count}}
       <button @click="funj()">-</button>
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
                    count:100
            },
            methods:{
                fuadd(){
                    this.count = this.count*2;
                },
                funj(){
                    this.count = this.count/2
                }
            }
            
        })
    </script>

 

 

 

v-on还可以调用参数，案例如下：

<div id="app">
     <button @click="fu(nn)">牛奶{{10}}元</button>
     <button @click="fu(jd)">鸡蛋{{5}}元</button>
     <div>余额：{{yuer}}</div>
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
                    yuer:100,
                    nn:10,
                    jd:5
            },
            methods:{
               fu(x){
                this.yuer = this.yuer-x;
               }
            }
            
        })
    </script>

 

 

3.v-show和v-if：这两个指令都是用来控制元素的显示和隐藏，但应用场景和底层原理不同，v-show的底层原理是通过控制css的display:none来实现元素的显示于隐藏的，而v-if则是通过控制元素的创建与移除来实现元素的隐藏和显示的。v-show适用于经常显示与隐藏的场景而v-if则适用于不经常显示与隐藏的场景。案例如下：

 <div id="app">
        <button  @click="fu()">切换显示与隐藏</button>
     <div v-show="isShow">v-show控制</div>
     <div v-if="isShow">v-if控制</div>
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
                    isShow:true
            },
            methods:{
                fu(){
                   this.isShow=!this.isShow;
                }
            }
        })
    </script>

 

未隐藏时：

隐藏后：

由此可看出v-if和v-show的底层原理的不同。

4.v-if和v-else和v-else if的联合用法：使用v-else和v-else if时必须使用v-if，案例如下：

<div id="app">
      <div>小明的成绩是:{{count}}</div>
      <div v-if="count>90">小明的等级是：A</div>
      <div v-else-if="count > 70 && count <= 90">小明的等级是：B</div>
    <div v-else-if="count > 60 && count <= 70">小明的等级是：C</div>
      <div v-else>小明的等级是：D</div>
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
                    count:94
            },
            methods:{
               
            }
            
        })
    </script>

 

注意Vue.js中不支持链式的写发如：70>count>60这种写法是不允许的。

5.v-bind：可以用来动态地绑定 HTML 元素的属性，例如 href、src、class、style 等。它可以简写为冒号 :。案例如下：

   <div id="app">
        <a :href="tbUrl">淘宝</a>
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
              
                  tbUrl:'https://www.taobao.com/'
            },
            methods:{
            
            }
            
        })
    </script>

 

6.v-for：v-for用来渲染元素，必须加上key值。案例如下：

<div id="app">
       <div v-for="(item,index) in list" :key="item.id">{{item}}</div>
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器，即选择容器
            data:{      //通过data提供渲染数据
              
                  list:[
                    '苹果','牛奶','香蕉'
                  ]
            },
            methods:{
            
            }
            
        })
    </script>

 

7.v-model：实现文本框的双向绑定。

 

点击登录按钮后：

点击重置按钮后：

以上就是Vue常用指令及用法案例，希望能帮助到有需要的人。