vue中的列表(数组)渲染例子

作者: 程序员同行者 | 来源:发表于2018-07-10 11:16 被阅读1次

vue中的列表(数组)渲染例子
vue列表渲染
2018-09-11
vue中的条件渲染例子
6.vue中的条件渲染&列表渲染
uniapp之列表渲染中key值的作用(vue.js)
vue项目-数组处理
v-for
Vue 循环渲染
6、列表渲染

vue中的列表(数组)渲染例子

<!DOCTYPE html>
<html>
<head>
    <title>vue中的列表渲染</title>
    <script src="./vue.js"></script>

</head>
<body>
    <!-- // 循环数组 -->
    
    <div id="app">
        <!-- 1. -->
    <!--    <div v-for="(item,index) of list"
             :key="item.id">
            {{item.text}}----{{index}}
        </div> -->

        <!-- 2. //使用模板占位符<template></template> -->
        <template v-for="(item, index) of list"
                  >
        <div>
            {{ item.text }} ---- {{ index }}
        </div>
        <span>
            {{ item.text }}
        </span>
    </template>
    </div>
    
    <!-- // 循环对象 -->
    <div id='app-1'>
        <div v-for="(item, key, index) of userInfo"
             :key="item.index">
        {{item}} --- {{key}}----{{index}}
    </div>
    </div>
    
<script>
    //数组操作方法 push  pop shift unshift splice sort reverse
    // 修改数组的内容并响应式显示有三种方法
        //1. set方法,(全局set，实例set)
            // Vue.set(vm.list,1,{id:'11',text:'pwd'})
            // vm.$set(vm.list,1,{id:'11',text:'pwd')
        //2. 直接改数组引用
            // // vm.list = {
            //      id: '1',
            //      text: 'hello'
            //  },
            //  {
            //      id: '2',
            //      text: 'world'
            //  },
            //  {
            //      id: '3',
            //      text: 'dell'
            //  }
        //3. 调用数组的变异方法如splice
            // vm.list.splice(0,0,{id:'1',text:'hello111'})
    var vm =  new Vue({
        el: '#app',
        data: {
            list: [
            {
                id: '1',
                text: 'hello'
            },
            {
                id: '2',
                text: 'world'
            },
            {
                id: '3',
                text: 'dell'
            }
                

        ]
    }
        
    
    }) 

    //修改对象内容并响应式显示有两种方法
    //1. 直接修改对象引用
        // vm1.userInfo = {name: "Dell",age: "28",gender: "male",salary: "secret",address:"beijing"}

    //2. set方法,(全局set，实例set)
            // Vue.set(vm1.userInfo,"address", "Dell111")
            // vm1.$set(vm1.userInfo,"address", "Dell111")
    var vm1 =  new Vue({
        el: '#app-1',
        data: {
            userInfo: {
                name: "Dell",
                age: "28",
                gender: "male",
                salary: "secret"
            }
        
    }
        
    })
    
</script>
</body>
</html>