Vue入门之Vue常用指令

1、v-model 双向数据绑定，当input输入框内的值改变，数据也随之改变

<div id="aa">
    {{ message }}
    <input v-model="message">
</div>
<script type="text/javascript">
    var vue = new Vue({
        el:'#aa',
        data:{
            message:'input'
        }
    });
</script>

2、v-for 遍历列表或数组

<div id="bb">
    <ul>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ul>
</div>

<script type="text/javascript">
    var vue3 = new Vue({
        el:'#bb',
        data:{
            todos:[
                {text:'哈哈'},
                {text:'嘿嘿'},
                {text:'嚯嚯'}
            ]
        }
    });
</script>

<div id="bb">
    <ul>
        <li v-for="item in items">{{ msg }} - {{ item.text }}</li>
    </ul>
</div>

<script type="text/javascript">
    var vue4 = new Vue({
        el:'#cc',
        data:{
            msg:'你呀',
            items:[
                {text:'哈哈'},
                {text:'嘿嘿'},
                {text:'嚯嚯'}
            ]
        }
    });
</script>

3、v-if与v-else

<div id="dd">
    <p v-if="Math.random()>5">随机数大于5</p>
    <p v-else>随机数小于5</p>
</div>
<script type="text/javascript>
    var vue5 = new Vue({
        el:'#dd',=
    });
</script>

template标签：

<div id="dd">
    <template v-if="ok">
         <h1>Title</h1>
         <p>Paragraph 1</p>
         <p>Paragraph 2</p>
    </template>
</div>
<script type="text/javascript>
    var vue5 = new Vue({
        el:'#dd',
        data:{
            ok:true
        }
    });
</script>

4、v-show，与v-if的区别是不支持template标签，若no的值为false，则不显示ok

<div id="ee">
    <p v-show="no">ok</p>
</div>
<script type="text/javascript>
    var vue5 = new Vue({
        el:'#ee',
        data:{
            no:true
        }
    });
</script>

5、v-html设置文本的innerHTML，如果内含HTML结构会解析成标签；v-text只解析文本

<div id="ff">
    <p v-text="content"></p>
    <p v-html="content"></p>
</div>
<script type="text/javascript>
    var vue6 = new Vue({
        el:'#ff',
        data:{
            content:"<a href='http://www.baidu.com'>百度一下</a>"
        }
    });
</script>