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>

 

posted @ 2018-09-01 19:25  前端[色色]  阅读(3796)  评论(0)  编辑  收藏  举报