Vue的常见指令及用法案例

admin2024-07-03  7

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>

Vue的常见指令及用法案例,第1张 

Vue的常见指令及用法案例,第2张 点击加按钮

Vue的常见指令及用法案例,第3张 点击减按钮

第二种用发就是当我们的处理逻辑复杂时我们可以通过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>

Vue的常见指令及用法案例,第4张 

 Vue的常见指令及用法案例,第5张

 Vue的常见指令及用法案例,第6张

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>

Vue的常见指令及用法案例,第7张 

Vue的常见指令及用法案例,第8张 

Vue的常见指令及用法案例,第9张

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>

Vue的常见指令及用法案例,第10张 

未隐藏时:

Vue的常见指令及用法案例,第11张

隐藏后:

Vue的常见指令及用法案例,第12张

由此可看出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的常见指令及用法案例,第13张 

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

5.v-bind:可以用来动态地绑定 HTML 元素的属性,例如 hrefsrcclassstyle 等。它可以简写为冒号 :。案例如下:

   <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>

 Vue的常见指令及用法案例,第14张

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>

Vue的常见指令及用法案例,第15张 

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

Vue的常见指令及用法案例,第16张

Vue的常见指令及用法案例,第17张 

点击登录按钮后:

Vue的常见指令及用法案例,第18张

点击重置按钮后:

Vue的常见指令及用法案例,第19张

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!