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?');
  • 相关阅读:
    sb世博
    seo 工具集锦
    各种Windows 操作系统中的 .NET Framework 支持
    httplib2模拟登陆
    python tips
    B2C电子商务能否通吃线上线下?
    复制镜像
    Scale Stack vs node.js vs Twisted vs Eventlet
    pool=eventlet.GreenPool(20)
    nginx最新部署
  • 原文地址:https://www.cnblogs.com/qing619/p/8862282.html
Copyright © 2011-2022 走看看