Vue筆記之v-for及應(yīng)用簡易留言板的實現(xiàn)

標簽：

Vue.js

渲染列表指令：v-for
语法：v-for="value, index in array“ index可省略
作用在想要重复生成的标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(value, index) in list">{{value}}----{{index}}</li>
        <li v-for="value, key, index in obj">{{value}}----{{key}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list:[1,2,3],
            obj:{
                a:4,
                b:5,
                c:6
            }
        }
    })
</script>
</body>
</html>

留言板
v-on v-model v-for的综合应用。
v-model="val" 将界面的输入数据写入vm中的val
v-on: click="sendHandle"使界面的click操作跳转至vm的methods中的sendHandle()
sendHandle()中的this即为vm，故其将vm中的val值存入了vm中的list
同时，v-for使得li标签输出了list中的所有value.title
由此可见，vm在view和model中起到的桥梁作用，真正实现了由viewModel对view和model进行管理操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="val"/>
    <input type="button" value="send" v-on:click="sendHandle"/>
    <ul>
        <li v-for="value in list">{{value.title}}</li>
    </ul>
</div>
<script>
    let list = [];
    //list一开始没有值，等ajax取值回来了，再改写list
    let vm = new Vue({
        el:'#app',
        data:{
            list,
            val:''
        },
        methods:{
            sendHandle(){
                this.list.push({
                    id:Date.now(),
                    title:this.val
                })
                this.val = '';
            }
        }
    })

    //模拟ajax
    setTimeout(function(){
        vm.list = [
            {
                id:123,
                title:'hello world'
            }
        ]
    }, 2000)
</script>
</body>
</html>

點擊查看更多內(nèi)容