常用指令 - 简书

常用指令

1.易忘点：

1.1 什么时候用 {{ }}

取data中的数据，如{{message}}


new Vue({

    el:'#app',

    data:{

            message:'你好，世界!',

            msg:'我要吃饭'

    }

});

1.2 什么时候用{}:

<p :style="{color:fontColor}">{{msg}}</p>

 new Vue({
        el:'#app',
        data:{
            msg:'今天的天气很好',
            fontColor:'red'
        }
})

1.3 什么时候用v-bind

绑定数据data

:src="imgSrc"

1.4 什么时候用v-on

绑定函数

@click="changeContentColor()"

2.指令：

2.1 v-model作用：

改变input的值，<p>里的值也改变


<p>{{message}}</p>

<input type="text" v-model="message"/>

new Vue({

        el:'#app',//视图

        data:{

                message:'你好，世界!'

        }

});

2.2 v-once作用：

v-once使得原始值不改变,即无论怎么改变input的值，依然只显示最原始的值


<p  v-once>原始值：{{msg}}</p>

<p>后面的:{{msg}}</p>

<input type="text" v-model="msg"/>

2.3 v-if作用：

满足if条件的话,显示执行该条语句，否则不显示
不满足条件，显示为注释掉那种

<p v-if="show">要显示出来</p>

<p v-if="height > 1.55">小明的身高:{{height}}m</p>

new Vue({

        el:'#app',//视图

        data:{

                show: true,

                height:1.68

        }

});

2.4 v-show作用：

不满足条件创建，显示为display:none


<p v-show="height > 1.55">小明的身高:{{height}}m</p>

2.5 v-else作用：

v-else不能单独使用，必须与v-if v-else-if使用
v-if与v-else之间不要存在其他标签，会识别不了v-else的

2.6 v-else-if作用：

v-if---------> v-else-if------------>v-else-if--------------->v-else

2.7 v-for作用：

v-for优先执行与v-if

<div id="app">
    <!--遍历数组-->
    <p v-for="(score, index) in scores">
        {{index + ':' +score}}
    </p>
    <!--遍历对象-->
    <p v-for="d in dog">
        {{d}}
    </p>
    <!--遍历字符串-->
    <p v-for="str in name">
        {{str}}
    </p>
    <!--遍历数字-->
    <p v-for="p in phone">
        {{p}}
    </p>
</div>

<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            scores:[100, 87, 88, 80],
            dog:{name:'旺财', age:6, height:1.44},
            name:'zhangsan',
            phone:'1888882'
        }
    })
</script>

2.8 v-text,v-html作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <p>{{msg}}哈哈哈</p>
    <!--v-text不能够往标签里添加新东西
    呵呵呵呵显示不出来-->
    <p v-text="msg">呵呵呵呵</p> <!--只显示Vue中msg的内容-->
    <div v-html="html"> <!--只显示Vue中html的内容-->
        哈哈哈哈!             <!--显示不出 -->
        <input type="text">  <!--显示不出 -->
    </div>
</div>

<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'今天的天气很好',
            html:'<input type="date"><input type="color">'
        }
    })
</script>
</body>
</html>

2.9 v-bind作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--给属性动态绑定数据用v-bind或者:-->
<div id="app">
    <img v-bind:src="imgSrc" alt="">
<!--可以省略v-bind 但要保留 :   -->
    <img :src="imgSrc1" :alt="alt">
</div>

<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            imgSrc:'img/slide.jpg',
            imgSrc1:'img/slide.jpg',
            alt:'我是美女'
        }
    })
</script>
</body>
</html>

2.9 v-on作用：

v-on里面放表达式或者函数methods中定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p :style="{color:fontColor}">{{msg}}</p>
    <button v-on:click="msg='今天好热啊！'">改变内容</button>
    <button @click="changeContent()">改变内容1</button>
    <button @click="changeContentColor()">改变颜色1</button>
</div>

<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'今天的天气很好',
            fontColor:'red'
        },
        methods:{//实例的所有函数实现
            changeContent(){
//                alert(0);
                this.msg = '测试改掉没有！'
            },

            changeContentColor(){
                this.fontColor = 'green'
            }
        }
    })
</script>
</body>
</html>

最后编辑于：2018.12.26 09:13:13