码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 中视图更新

时间:2020-02-19 23:53:42      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:cli   修改   引用   计算   methods   网络基础   method   cal   doctype   

  当vue的data中的值发生变化后,视图中引用部分的值是否会同时发生变化呢?首先,我们要知道有哪些更新的类型。

 更新的类型

  1、直接赋值更新。this.heros=[‘ ‘],模板会立即更新。

  2、通过函数更新。this.heros.push("xx)。

 更新的函数:

  push():在数组最后添加元素;

  pop():删除最后一个元素;

  shift():删除最后一个元素;

  unshift():在开头添加一个元素;

  splice():可以增加、修改、删除元素。splice函数使用方法:其需要传递开始操作元素的索引,影响的元素个数。如是:在指定位置增加元素,其第二个参数(影响元素个数)必须为0,如果为其他的则变成了修改元素了。其核心思想为:从开始影响的索引元素开始,根据传递的第二个元素判断,将会影响后面的几个元素,然后,根据后面的items值,去影响,如果items的个数多于影响个数,则会在被影响元素后面添加剩余的元素;如果,只有起始元素索引和影响元素,则会将影响元素删除。

 vue的set()方法

  在vue中,直接通过下标修改元素的值或增加新的属性,视图是不会自动更新的。此时,需要使用set()方法。
  
  更新值时是第一个参数是要【更新的对象】,第二个参数是对象中【要更新的索引】,第三个参数是【更改后的值】。
  增加属性时第一个参数是具体要添加的对象(如果是数组中某一项,则要通过索引直接指明),第二个参数是要添加属性的【属性名】,第三个参数是【属性值】
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue触发视图更新</title>
</head>

<body>
    <div id="app">
        书名:
        <ul>
            <li v-for="book in books" key="book">{{book}}</li>
        </ul>
        <button @click="update_1">直接更新</button>
        <button @click="update_2">通过函数更新</button>
        <button @click="pop_1">通过函数<span style="color: red;">删除最后一个元素</span> </button>
        <button @click="shift_1">通过函数<span style="color: red;">删除第一个元素</span> </button>
<button @click="unshift_1">在开头添加一个元素</button>
<button @click="splice_add">在第2个元素后增加多个元素</button>
        <button @click="splice_update">修改第2个元素的值</button>
        <button @click="splice_update_add">修改第2个值,并在其后添加元素</button>
        <button @clicK="splice_del">删除第2个数</button>
        <button @click="update_set">set方法变更值</button>
                <div v-for="book in books_2">
            {{book.title}}:{{book.author}}
        </div>
        <button @click="set_2">补上作者</button>
</div>
    <script>
        new Vue({
            el: #app,
            data: {
                books: [三国演义, 水浒传, 数据结构, 操作系统],
                books_2: [{
                        title: 水浒传,
                        author: 施耐庵,
                    },
                    {
                        title: 三国演义,
                        author: 罗贯中,
                    },
                    {
                        title: 西游记,
                        author: 吴承恩,
                    },
                    {
                        title: 红楼梦,
                    },
                ]
            },
            methods: {
                update_1() {
                    this.books = [三国演义, 水浒传, 红楼梦]
                },
                update_2() {
                    this.books.push("西游记")
                },
                pop_1() {
                    this.books.pop()
                },
                shift_1() {
                    this.books.shift();
                },
                unshift_1() {
                    this.books.unshift(这是四大名著)
                },
                splice_add() {
                    this.books.splice(2, 0, 计算机网络基础, 计算机组成原理)
                },
                splice_update() {
                    this.books.splice(1, 1, 红楼梦)
                },
                splice_update_add() {
                    this.books.splice(1, 1, "红楼梦", "史记")
                },
                splice_del() {
                    this.books.splice(1, 1)
                },
                update_set() {
                    Vue.set(this.books, 2, 西游记)
                },
                set_2() {
                    Vue.set(this.books_2[3], author, 曹雪芹, )
                }
            }

        })
    </script>
</body>

</html>    

 

Vue 中视图更新

标签:cli   修改   引用   计算   methods   网络基础   method   cal   doctype   

原文地址:https://www.cnblogs.com/xshan/p/12333827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!