zoukankan      html  css  js  c++  java
  • vue 中 $set 的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>vue $set</title>
    <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      姓名:{{ name }}<br>
        年龄:{{age}}<br>
        性别:{{sex}}<br>
        说明:{{info.content}}
    </div>
    <!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) -->
    <script>
    var data = {
        name: "简书",
        age: '3',
        info: {
            content: 'my name is test'
        }
    }    
    var key = 'content';
    var vm = new Vue({
        el:'#app',
        data: data,
        ready: function(){
            //Vue.set(data,'sex', '男')
            //this.$set('info.'+key, 'what is this?');
        }
    });
    data.sex = '男';
    </script>
    </body>
    </html>
    

      

    <script>
    var data = {
        name: "简书",
        age: '3',
        info: {
            content: 'my name is test'
        }
    }    
    var key = 'content';
    new Vue({
        el:'#app',
        data: data,
        ready: function(){
            Vue.set(data,'sex', '男');
            this.$set('info.'+key, 'what is this?');
        }
    });
    </script>
    复制代码
  • 相关阅读:
    无题
    使用git clone 出现 Permission denied 解决办法
    为什么要用BigDecimal
    FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换
    版本管理规范
    Intellij Idea 常用快捷键
    AI学习资源
    Python图谱
    网站架构演化历程
    微服务系列
  • 原文地址:https://www.cnblogs.com/taochengyong/p/10696415.html
Copyright © 2011-2022 走看看