vue常见标签的用法

<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key="index" >{{index}}  {{item}}</li>

    </ul>
    <ul>
        <li v-for="(value,key) in user"  >{{key}} : {{value}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in userlist"  :key="item.user.uname">
            <!-- >符号使用&gt代替-->
        <div v-if="item.user.age > 27" style="background-color: bisque">
             {{index}}-{{item.user.uname}}-{{item.user.age}}
        </div>
      <div v-else="" style="background-color: blue">
             {{index}}-{{item.user.uname}}-{{item.user.age}}

        </div>

        </li>
    </ul>

</div>
</body>

<script>
    var VM = new Vue(
        {
            el : "#app",
            data:{
                list:[11,22,33,44,55,66],
                user:{uname:"张三",age:28},
                userlist:[
                    {user:{uname:"张三",age:28}},
                    {user:{uname:"李四",age:26}},
                    {user:{uname:"王五",age:254}}]


            },
            methods:{

            }
        }
    );

</script>

<div id="app">
    <input type="text" v-model="num1"> +
    <input type="text" v-model="num2"> =
    <input type="text" v-model="result"></input>
    <button v-on:click="cal">计算</button>
    <!--   解决插值表达式闪烁问题，使用v-text
                        v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题-->
    {{result}}
    <span v-text="result"></span>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    var VM = new Vue(
        {
            el : "#app",
            data:{
                name :'xiaoming',
                num1 : 0,
                num2 : 0,
                result:0
            },
            methods:{
                cal:function () {
                    this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
                }
            }
        }
    );

</script>