v-for--循环数组---循环对象---迭代数字
2023-09-11 14:18:36 时间
循环简单数组
<p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});
循环复杂组数
<div id="app"> <p v-for="(user, i) in list">Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}</p> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' }, { id: 4, name: 'zs4' } ] }, methods: {} }); </script>
循环对象
<div id="app"> <!-- 注意:在遍历对象身上的键值对的时候, 除了 有 val key ,在第三个位置还有 一个 索引 --> <p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}</p> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { user: { id: 1, name: '托尼·屎大颗', gender: '男' } }, methods: {} });
迭代数字
<div id="app"> <!-- in 后面我们放过 普通数组,对象数组,对象, 还可以放数字 --> <!-- 注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始 --> <p v-for="count in 10">这是第 {{ count }} 次循环</p> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script>
相关文章
- 对循环对象的特定某个操作
- 循环链表结构
- php循环某个月的所有日期
- Atiitt 对象转换json 序列化规范 Java 循环引用的解决 设置序列化层次深度 去除不必的属性 太长不方便月度 jsonObject.remove("num1"); Prety fo
- uni-app swiper实现公告栏上下循环滚动(整理)
- Paper:RNN之《Generating Sequences With Recurrent Neural Networks用循环神经网络生成序列》的翻译和解读
- Chromium on Android: Android在系统Chromium为了实现主消息循环分析
- seurat的 addmodule循环画图 等同于基因的叠加图 识别细胞类型 空转与单细胞得到的marker基因联合
- for循环中的lambda与闭包——Python的闭包是 迟绑定 , 这意味着闭包中用到的变量的值,是在内部函数被调用时查询
- 浏览器和 Node 中的事件循环有什么区别?