vue.js_04_vue.js的for循环,if判断和show显示

2019/10/16 15:28
阅读数 64

1.for循环

<body>
        <div id="app">
            <p>{{list1[0]}}</p>
            <hr />
            <!--遍历数组-->
            <p v-for="(item,index) in list1">第{{index}}项:{{item}}</p>
            
            <!--遍历数组中的对象-->
            <p v-for="user in list2">id:{{user.id}}--name{{user.name}}</p>
            
            <!--遍历对象-->
            <p v-for="(val,key) in user">{{val}}--{{key}}</p>
            
            <!--v-for迭代数字 初始值:1-->
            <p v-for="count in 10">{{count}}</p>
            
            id:<input type="text" v-model="id"/> 
            name:<input type="text" v-model="name"/>
            <input type="button" value="添加" @click="add"/>
            
            <p v-for="item in list2" :key="item.id"> 
                <input type="checkbox" /> {{item.id}}--{{item.name}}
            </p>
            
        </div>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    id:'',
                    name:'',
                    list1:[1,2,3,4,5,6,7,8,9],
                    list2:[
                        {id:1,name:'zs1'},
                        {id:2,name:'zs2'},
                        {id:3,name:'zs3'},
                        {id:4,name:'zs4'},
                    ],
                    user:{
                        id:1,
                        name:'托尼斯塔克',
                        gender:'',
                    }
                },
                methods: {
                    add(){
                    this.list2.unshift({id:this.id,name:this.name})    
                        
                    }
                }

            })
        </script>
</body>

 2.v-if和v-show

<body>
        <div id="app">
            <input type="button" value="切换" @click="flag=!flag" />
            <!--移除元素和添加元素  -->
            <h3 v-if="flag">这是v-if</h3>
            <!--设置display:none的属性-->
            <h3 v-show="flag">这是v-show</h3>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    flag: true,
                },
                methods: {
                }
            })
        </script>
</body>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部