Vue

Posted 2021-01-28 yaomengli

<div id="app">
    {{name}}
    <!--v-model 双向数据绑定-->
    <input type="text"  v-model="name"/>

    <!--v为值 i为索引-->
    <p v-for="(v,i) in arr">{{v}}---{{i}}}</p>
    <ul>
        <!--//放在li上 就会循环多个li标签-->
        <li v-for="item1 in arr2">{{item1.name}}{{item1.age}}</li>
    </ul>
    <!--<button v-on:click="action">click</button>-->
    <[email protected]="action"为v-on:click="action"的缩写-->
    <button @click="action">click</button>
    <!--双击dblclick-->
    <button v-on:dblclick="action">click2</button>
    <button v-on:mouseover="action1" v-on:mouseout="action2">mouseover</button>
    {{age}}}
    <!--flag为true时显示 为false时显示-->
    <button v-show="flag">显示</button>

    <!--如果age>20显示 年龄，否则显示姓名-->
    <button v-if="age>20">{{age}}</button>
    <button v-else>{{name}}</button>
</div>

<script>
    new Vue({
        el:‘#app‘,
        data:{
            name:"狐狸狗",
            age:‘17‘,
            flag:false,
            arr:[1,2,3,4],
            arr2:[{name:"赵狗子",age:"12"},{name:"赵狗子2",age:"13"}]
        },
        methods:{
//            点击action改变name的值
            action:function(){
                this.name=‘zhao‘
            },
            action1:function(){
                this.age=‘45‘
            },
            action2:function(){
                this.age=‘17‘
            }
        }
    })
</script>