Vue常用指令

Posted sese

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue常用指令相关的知识,希望对你有一定的参考价值。

vue中常用v-表示指令,下面总结一下常用的指令有哪些:

插入文本:v-text

相当于元素的innerText属性,必须是双标签

 

插入HMTL:v-html

相当于元素的innerHTML属性

 

循环:v-for

v-for的使用,除了item属性,还有一些其他辅助属性。假设你现在循环的对象名字为students:

  • 如果students是数组,还有index属性,如v-for="(item,index) in students";
  • 如果students是对象,还有value,key属性,如v-for="(value,key,index) in students";

 

条件渲染

第一种:if ... else if ...else型

是否插入元素

 

第二种:v-show

是否隐藏元素

 

属性绑定:v-bind

v-bind:属性名="常量 || 变量名",简写形式——:属性名="常量 || 变量名"

如:

<div v-bind:属性名="变量"></div>
//可以简写成
<div :属性名="变量"></div>

//如果要赋值常量,需要给常量用单引号包起来,如
<div :属性名=" ‘常量‘ "></div>

 

双向绑定:v-model

所谓的双向绑定,就是你在视图层里面改变了值,vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

 

绑定事件:v-on

v-on:click = "方法名 || 直接改变 vue 内部变量",简写形式——@click = "方法名 || 直接改变 vue 内部变量"

<div v-on:click=" num = 1 "></div>
//可以简写成
<div @click=" num = 1 "></div>

可以直接更改vue内部的变量,如上面的num,是我在data里面定义的一个属性。

 

上述所有指令的例子代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>vue常用指令</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
        <style type="text/css">
        .even{background-color: #f2f2f2}
        </style>
    </head>
    <body>    
        <div id="app"></div>
        
        <script type="text/javascript">
            new Vue({
                el:#app,
                template:`
                    <div>
                        <h1 v-text="myTxt"></h1>
                        <hr/>
                        <div v-html="myHtml"></div>
                        <hr/>
                        <button v-if=" num == 1 ">显示1</button>
                        <button v-else-if=" num == 2 ">显示2</button>
                        <button v-else=" num == 3 ">显示3</button>
                        <hr/>
                        <button v-show="isShow">我默认显示</button>
                        <hr/>
                        <div v-bind:data-name=" myName " :data-sex=" ‘女‘ ">通过v-bind来给属性赋值</div>
                        <hr/>
                        <button v-on:click=" num = 1">改变num值为1</button>
                        <hr/>
                        <input v-model="country" placeholder="试着输入中国">
                        <div v-if=" country == ‘中国‘ ">中国梦,我的梦!</div>
                        <hr>
                        <ul>
                            <li v-for="(item,index) in newsList" :class="index%2==0 ? ‘even‘ : ‘‘">
                                <p>{{item.title}}<p>
                                发布时间:<span>{{item.time}}<span>
                            </li>
                        </ul>
                        <hr>
                        <div v-for="(value,key) in students">
                            {{key}}:{{value}}
                            <br/>
                        </div>
                        
                    </div>
                `,
                data:{
                    myTxt:我是v-text的值,
                    myHtml:<p>我是HTML</p>,
                    num:2,//改变num的值看效果
                    isShow:true,
                    myName:Sheryl,
                    count:1,
                    country:‘‘,
                    newsList:[
                        {title:"新闻标题一",time:"2018-08-31"},
                        {title:"新闻标题二",time:"2018-08-31"},
                        {title:"新闻标题三",time:"2018-08-31"}
                    ],
                    students:{
                        name:Sheryl,
                        sex:,
                        age:25
                    }
                },
                methods:{
                    changeCount(action) {
                        if (action === minus) {
                            if (this.count > 1) {
                                this.count--;
                            } else {
                                alert("不能再减了")
                            }
                        } else {
                            this.count++
                        }
                    },
                }
            })
        </script>       
    </body>
</html>

 

以上是关于Vue常用指令的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0-常用的几个指令

8个非常实用的Vue自定义指令

8个非常实用的Vue自定义指令

Vue.js——常用的指令

Vue.js常用指令:v-for

Vue的十个常用指令