Vue使用v-for实现循环

 时间:2026-04-28 20:00:22

1、创建html文件,在其中引入vuejs。

<script src='../js/vue.js'></script>

vue.js放在js目录下。

Vue使用v-for实现循环

2、模板创建完毕后。

在data中创建一个list列表数组对象。

data:{

booksList:['JAVA编程','C++语言','Python编程','Android开发']

}

Vue使用v-for实现循环

3、在div内,创建一个ul标签,其中使用v-for创建li标签列表。

<ul>

<li v-for="(item,index) in booksList" :key="index">{{item}}</li>

</ul>

Vue使用v-for实现循环

4、给列表简单添加一些样式。

Vue使用v-for实现循环

5、打开浏览器查看页面显示结果。

列表中的元素都显示出来了。

Vue使用v-for实现循环

6、添加一个按钮,用来操作列表内的元素。

<button @click="delBook">删除最后一个元素</button>

Vue使用v-for实现循环

7、在methods方法内,定义delBook事件,用来操作书籍列表。

Vue使用v-for实现循环

8、打开浏览器,点击按钮【删除最后一个元素】,最后一本书就被删除了。

连续点击连续删除。

Vue使用v-for实现循环

  • 医保怎么修改参保地区
  • 医保参保地怎么改到新城市?
  • 医保怎么换参保地
  • 医保怎么改参保地
  • 支付宝医保找不到参保地怎么办
  • 热门搜索
    什么花最香 玫红色配什么颜色好看 递延收益属于什么科目 tst是什么品牌 党的三大作风是什么 1月5日是什么星座 女为悦己者容什么意思 公积金买房有什么好处 前程似锦什么意思 children是什么意思