vue 的 v-for 循环 v-if 判断 v-model 双向绑定的一些列基础

最新推荐文章于 2024-07-25 19:21:29 发布

笔临

最新推荐文章于 2024-07-25 19:21:29 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/panhuanqin/article/details/83753227

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ name }}== {{age}}</p>
    <p>{{ nsg }}</p>
    <p>{{ arr }}</p>
    <p>{{ obj2 }}</p>
    <input type="text" v-model="nsg">
                                                          <!--model 用于表单双向绑定-->
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
                                                         <!--v-for="item in arr"  循环  自生成-->
    <ul>
        <li v-for="(v,k) in arr">{{v}}==={{k}}</li>
                                                        <!--  数组 v  value值    k 索引-->
    </ul>

    <ul>
        <li v-for="(v,k) in abj">{{v}}==={{k}}</li>
                                                               <!--v  值    k 鉴-->
    </ul>

    <ul>
        <li v-for="(v,i) in obj2">{{v}}==={{i}} =={{v.names}}=={{v.age}}</li>
                                                                    <!--v  值    k 索引-->
    </ul>

    <ul>
        <li v-for="v in obj2">{{v.names}}=={{v.age}}</li>
        <!--v  值    k 索引-->
    </ul>

    <button @click="action">click</button>
    <button v-on:mouseover="action2" @mouseout="action3">mouseover</button>
                              <!--   v-on  同于   @   -->


    <button v-show="flags">show</button>
                                                <!--flags 为flase  消失-->

    <p v-if="age>30">{{age}}</p>
    <p v-else="age>30">{{flags}}</p>
                                           <!--show 和 if 区别    show 不占位置   if  位置依然在 -->



</div>

<script>
new Vue({
    el:"#app",
    data:{
        name:"aaaa",
        nsg:"hallo word",
        age:20,
        flags:true,

        arr:["a","b","c","d","e"],
        abj:{
            id:1,
            namespace:"bbbbb",
        },
        obj2:[{
            names:"zzz",
            age:"20"
        },{
            names:"xxx",
            age:"30"
        }]
    },
    methods:{                                // 里面专属 放方法
        action:function () {
            this.nsg = "aaaaaaaaaaaaaaaaaa"
        },
        action2:function () {
            this.age = "90"
        },
        action3:function () {
            this.age = "190"
        }
    }
})
</script>
</body>
</html>