vue重新渲染数据,刷新显示数据

一般这种功能可以用在页面添加功能上面,例如push字符串,‘查看更多’的功能时候,可以用到这种方法。


<template>

  <div>

      <div v-for='item in list'>{{item}}</div>

      <button @click='click'>改变</button>

      <button @click='hadelClick'>解决方法</button>

  </div>

</template>

<script>

  export default({

    data(){

      return{

        list:{a:'a',b:'b'},

      }

    },

    methods: {

          click() {

          //  未声明不触发渲染

          this.list.c='c'

          },

          hadelClick(){

            // 解决方法,使用vue提供的$set方法来触发渲染

将后面的d  添加到第一个d中

            this.$set(this.list,'d','d')

          }

        }

  })

</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 12,944评论 0 13
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 13,145评论 0 13
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,798评论 1 32
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,736评论 0 38
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,646评论 0 6