Vue2 指令v-if v-show v-for v-text v-html

1.插值指令{{ }} 

<div id="helloWorld">
    <p>{{ msg + "!!!"}}</p>
    <p><input type="text" v-model="msg"></p>
</div>
<script>
    var app=new Vue({
        el:"#helloWorld",
        data:{
            msg:"hello world"
        }
    })
</script>

2.逻辑判断指令 v-if  v-show

<div id="app">
    <h3 v-if="haveTitle">生成标题</h3>
    <div v-show="show">显示我</div>
    <p>-------我是底线-------</p>
</div>
<script>
    var a=new Vue({
        el:"#app",
        data:{
            haveTitle:true,
            show:false
        }
    })
</script>

3.循环指令 v-for

<div id="app">
    <ul>
        <li v-for="color in orderedColors">{{ color }}</li>
    </ul>
    <p>带序号：</p>
    <ul>
        <li v-for="(stu,index) in students">{{ index }} {{ stu.name }}</li>
    </ul>
</div>
<script>
    var a1=new Vue({
        el:"#app",
        data:{
            colors:["red","green","black","white"],
            students:[
                {name:"Jack",age:18},
                {name:"Joe",age:20},
                {name:"Lily",age:19}
            ]
        },
        computed:{
            orderedColors:function(){
                return this.colors.sort();
            }
        }
    })
</script>

4.指令v-text和v-html

<div id="app">
    <span v-text="msg"></span><br />
    <span>{{ msg }}</span>
    <div>{{ myHtml }}</div>
    <div v-html="myHtml"></div>
</div>
<script>
    var a1=new Vue({
        el:"#app",
        data:{
            msg:"hello I am msg",
            myHtml:"<h2>我是标题2</h2>"
        }
    })
</script>