vue数组的基本用法:forEach(es6)(一)

 时间:2026-02-14 05:38:24

1、新建一个html。

数组的基本用法.html,选择一个简单的模板,用来快速生成html的模板。

vue数组的基本用法:forEach(es6)(一)

2、点击【创建】,创建完成。

引入vue.js,这里我已经下载好了,你可以去官网下载。

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

vue数组的基本用法:forEach(es6)(一)

3、编写一个div,id是app

<div id="app">

数组的基本用法一:forEach

</div>

vue数组的基本用法:forEach(es6)(一)

4、然后将app挂载到vue中。

const app = new Vue({

el:'#app'

})

vue数组的基本用法:forEach(es6)(一)

5、定义一个数组:nums:[1,2,3,4,5]

data:{

nums:[1,2,3,4,5]

}

注意el:'#app'后面要有,号

vue数组的基本用法:forEach(es6)(一)

6、将数组显示出来{{}},然后增加一个按钮,用来遍历数组并进行一下操作。

vue数组的基本用法:forEach(es6)(一)

7、按钮绑定一个点击事件,@click="forEachArr",

并在methods中添加事件,事件内对数组进行forEach,并打印。

methods内是用来存放一些函数方法的,这是vue标准。

vue数组的基本用法:forEach(es6)(一)

8、点击【运行】-【运行到浏览器】选择浏览器,

这样运行后,当改变html内代码时,浏览器内容会实时响应,也可以直接打开浏览器打开html,当代码改变时,手动刷新浏览器。

vue数组的基本用法:forEach(es6)(一)

9、f12打开开发者工具,打开控制台。

点击按钮,查看控制台输出。

vue数组的基本用法:forEach(es6)(一)

10、注意,如果现在利用:

this.nums[i++] = num+10改变nums,是做不到实时响应的。

如果要做到实时响应,需要用到Vue.set

Vue.set(this.nums,i++,num+10)

vue数组的基本用法:forEach(es6)(一)

11、再次点击按钮【数字+10】,这时页面就改过来了。

vue数组的基本用法:forEach(es6)(一)

  • 怎样和别人沟通技巧
  • jquery遍历表格,获得表格中每个td的内容
  • 导入导出oracle数据库表的dmp文件
  • 快速的搭建局域网地图服务器
  • 景区网站模板应该包含哪些功能模块?
  • 热门搜索
    盘锦旅游攻略 深圳南澳岛旅游攻略 张家界的旅游景点 新都旅游 香港旅游全攻略 沙湖旅游攻略 湖州旅游攻略 埃及旅游最佳时间 五一旅游线路 湖南旅游团