vue.js 列表追加项写法

最新推荐文章于 2024-08-06 16:15:06 发布

weixin_30325971

最新推荐文章于 2024-08-06 16:15:06 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dj258/p/9276737.html

本文通过一个具体的示例展示了如何使用Vue.js框架来动态更新列表内容。示例中初始化了一个包含三个网站名称的数组，并通过Vue实例进行数据绑定显示。随后通过脚本向数组追加了多个相同的项，实时更新了列表。

<ul id="app">
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>
<script>
var v=new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})

v.sites.push({name: 'Taobaosss' });
v.sites.push({name: 'Taobaosss' });
v.sites.push({name: 'Taobaosss' });
v.sites.push({name: 'Taobaosss' });
v.sites.push({name: 'Taobaosss' });
v.sites.push({name: 'Taobaosss' });
 
</script>