Vue2 Computed 数组添加数据 - 详细步骤与示例代码

<template>
  <div>
    <ul>
      <li v-for='(item, index) in computedArray' :key='index'>{{ item }}</li>
    </ul>
    <button @click='addItem'>添加一条数据</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      array: []
    }
  },
  computed: {
    computedArray () {
      return this.array
    }
  },
  methods: {
    addItem () {
      this.array.push('新数据')
    }
  }
}
</script>
<h2>Vue2 中向 Computed 数组添加数据</h2>
<p>在 Vue2 中，如果要向 computed 属性中获取的数组添加数据，可以采取以下步骤：</p>
<ol>
<li><strong>在 data 中定义一个空数组。</strong></li>
<li><strong>在 computed 中使用该数组，并返回。</strong></li>
<li><strong>在 methods 中定义一个函数，用于向该数组中 push 一条数据。</strong></li>
<li><strong>在模板中，使用 v-for 遍历 computed 中的数组，并在需要的地方调用 methods 中定义的函数。</strong></li>
</ol>
<h3>示例代码</h3>
<pre><code class="language-html">&lt;template&gt;
  &lt;div&gt;
    &lt;ul&gt;
      &lt;li v-for='(item, index) in computedArray' :key='index'&gt;{{ item }}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;button @click='addItem'&gt;添加一条数据&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data () {
    return {
      array: []
    }
  },
  computed: {
    computedArray () {
      return this.array
    }
  },
  methods: {
    addItem () {
      this.array.push('新数据')
    }
  }
}
&lt;/script&gt;
</code></pre>
<h2>总结</h2>
<p>通过以上步骤，我们可以轻松地向 Vue2 中 computed 属性中获取的数组添加数据。这在很多实际应用场景中非常有用，例如动态添加列表项，更新数据等。</p>