v-for更新数据只能使用数组的向相关方法??

来源：3-15 Vue中的列表渲染

qq_夜_71

2020-05-30 13:46:06

老师,你下载一下最新的vue.js看看,我用最新的dev环境的vue.js,通过数组下标修改元素,界面也会刷新.和您在课程中讲的不同.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    ID:<input type="text" v-model="id"/>
    userName:<input type="text" v-model="userName"/>
    <button @click="add">添加</button>
    <button @click="change">改变</button>
    <ul>
        <!-- v-for 遍历数组,使用 of ,为了防止复用,应当绑定属性key-->
 <li v-for="(value,index) of list" :key="value.id">
            <input type="checkbox"/>
            ID:{{value.id}} userName: {{value.userName}} index:{{index}}
        </li>

    </ul>
    <!-- v-for 遍历对象,使用 in ,为了防止复用,应当绑定属性key-->
 <ul>
        <li v-for="(value,key) in obj" :key="key">
            <p> {{value}} {{key}} </p>
        </li>
    </ul>

    <!--当使用v-for循环创建元素的时候,不想要外层的父元素,则可以使用template,template是占位符,不会渲染到页面上来-->
 <template v-for="item of paragraphs">
        <h3>{{item.title}}</h3>
        <p>{{item.content}}</p>
    </template>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            id: '',
            userName: '',
            list: [],
            obj: {
                name: 'jin',
                sex: 'nan',
                age: 18
 },
            paragraphs: [
                {
                    title: '我是标题1',
                    content: '我是内容1'
 },
                {
                    title: '我是标题2',
                    content: '我是内容2'
 },
                {
                    title: '我是标题3',
                    content: '我是内容3'
 }
            ]
        },
        methods: {
            add() {
                this.list.unshift({
                    id: this.id,
                    userName: this.userName
 })
                this.id = this.userName = ''
 },
            change() {
                this.paragraphs[1].title='修改后的标题'
 this.obj.sex='修改后的性别'
 this.list[0].id='修改后的id'
 }
        }
    })

</script>
</body>
</html>

写回答

1回答