VUE指令集合

最新推荐文章于 2024-05-15 10:07:53 发布

不会写代码的菜

最新推荐文章于 2024-05-15 10:07:53 发布

阅读量246

点赞数 2

分类专栏： vue.js 文章标签： java 前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125841265

版权

vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

VUE指令集合

1.v-bind

v-bind指令可以用来响应式的更新任何一个标签的html属性,属性绑定

举例:

 v-bind:key='item.id'
 v-bind:title='title'

注意:

v-bind可以我们可以将前面的 v-bind的省略,简写为 :

 :key='item.id'
 :title='title'

栗子:

使用v-bind实现动态图片切换功能

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
         <div id="app">
             <!-- v-bind 为标签的其他属性动态进行数据绑定 -->
             <img v-bind:src="bsrc" />
             <input type="button" v-on:click="test1()" value="下一张"/>
         </div>
         <script>
             var a = new Vue({
                 el:"#app", 
                 data:{
                     array:["img/1.png","img/2.png","img/3.png","img/4.png","img/5.png"],
                     index:0,
                     bsrc:"img/1.png",
                 },
                 methods:{
                     test1(){
                         this.index++;
                         this.bsrc = this.array[this.index];
                     }
                 }
                 
             })
         </script>
     </body>
 </html>

运行结果:

2.v-on

事件绑定,用于监听dom事件

举例:

 <a v-on:click="handler"><a v-on:click="handler">百度</a>

注意:

v-on可以简写为 @

 <a @click="handler">百度</a>

3.v-model

双向数据绑定,一般用于表单元素上

举例:

v-model="form.title"

栗子:

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
         <div id="app">
             <!-- v-model 设置获取表单元素值 -->
             <p v-text="account"></p>
             <input type="text" v-model="account"/>
             <input type="button" @click="test1()" value="按钮"/>
         </div>
         <script>
             var a = new Vue({
                 el:"#app", 
                 data:{
                     account:""
                 },
                 methods:{
                     test1(){
                         this.account="admin";
                     }
                 }
                 
             })
         </script>
     </body>
 </html>

运行结果:

4.v-show

条件性渲染某块内容,但是v-show仅仅是切换元素的display属性,元素始终都会被渲染

注意:

v-show不支持template元素

栗子:

使用v-show仅显示符合条件内容

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <!-- <script src="https://unpkg.com/vue@next"></script> -->
         <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
         <div id="app">
             <img v-show="isShow" src="img/1.png" />
                 
                 <!--不符合条件,运行结果并未显示-->
             <img v-show="age>18" src="img/2.png" /> 
         </div>
         <script>
             var a = new Vue({
                 el:"#app", 
                 data:{
                     isShow:true,
                     age:16,
                 }
             })
         </script>
     </body>
 </html>

运行结果:

5.v-for

遍历渲染

举例:

 <div v-for="item in list"></div>

栗子:

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <!-- <script src="https://unpkg.com/vue@next"></script> -->
         <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
         <div id="app">
             <select>
                 <option v-for="c in city">{{c}}</option>
             </select>
             
             <table border="1">
                 <tr>
                     <td>序号</td>
                     <td>姓名</td>
                     <td>年龄</td>
                 </tr>
                 <tr v-for="(uesr,index) in uesrs">
                     <td>{{index+1}}</td>
                     <td>{{uesr.name}}</td>
                     <td>{{uesr.age}}</td>
                 </tr>
             </table>
         </div>
         <script>
             var a = new Vue({
                 el:"#app", 
                 data:{
                     city:["上海","天津","西安","成都"],
                     uesrs:[{name:"Tom1",age:18},{name:"Tom2",age:18},{name:"Tom3",age:18}],
                 }
             })
         </script>
     </body>
 </html>

运行结果:

6.v-if v-else v-else-if

条件渲染

举例:

<h1 v-if="exp">Vue</h1>
 <h1 v-else>Oh no</h1>

注意:

是否能看到文本的内容取决于exp值的真假,当exp返回true时,h1的内容会被渲染,否则渲染v-else中的内容
v-if可以单独使用

7.v-text v-html

用于设置标题

举例:

 v-text="message"
 v-html="message"

栗子:

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <!-- <script src="https://unpkg.com/vue@next"></script> -->
         <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
         <div id="app">
             <p>{{message}}aaa</p>
             <p v-text="message">bbb</p>
             <p v-html="message">ccc</p>
             
             <input type="button" value="测试按钮" v-on:click="test1()"/>
             <input type="button" value="测试按钮" @click="test2()"/>
         </div>
         <script>
             var app = new Vue({
                 el:"#app", 
                 data:{
                     message:"<b>hello,vue!</b>"
                 },
                 methods:{
                     test1(){
                         alert("111");
                     },
                     test2(){
                         alert("222");
                     }
                 }
             })
         </script>
     </body>
 </html>