zoukankan      html  css  js  c++  java
  • vue $set修改对象

    在vue开发中,当生成vue实例后,再次给数据赋值时,有时候并不会自动更新到视图上去;

    eg:<!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>
        手机:{{phone}}<br>
        性别:{{sex}}<br>
        说明:{{list.instr}}
    </div>
    <script>
    var data = {
        name: "简书",
        phone: '15736882244',
        list: {
            instr: 'my name is Yilia'
        }
    }    
    //var key = 'instr';
    var vm = new Vue({ el:'#app', data: data, ready: function(){
        //Vue.set(data,'sex', '男');
        //this.$set('list.'+key, 'who are you?');

      } }); data.sex = ''</script> </body> </html>

    这样运行的结果是

    姓名:简书

    年龄:15736882244

    性别:

    说明:my name is Yilia

    解决方法是:

    Vue.set(data,'sex', '男')

    还可以使用 vm.$set实例方法,这也是全局 Vue.set方法的别名:

    var key = 'instr'; //这种主要用于当对象中某个属性值动态生成时处理方式
    this.$set('list.'+key, 'who are you?');
     或
    this.$set('list.instr', 'who are you?');
  • 相关阅读:
    【JAVA与C#比较】其它
    C#和java之间的一些差异与共性
    C#与Java的语法差异
    关于npm本地安装模块包(node_modules),安装不了的问题
    vue
    vue
    vue
    vue
    v
    vue -model
  • 原文地址:https://www.cnblogs.com/qing619/p/8862282.html
Copyright © 2011-2022 走看看