vue学习笔记-8-循环结构

一，v-for遍历数组

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">[v-cloak]{display:none}#app{width: 20%;margin: 200px auto;line-height: 40px;border: 1px solid #ccc;padding: 10px;}#app >.test{height: 30px;width: 100%;background: blue;}</style></head><body><div id="app"><div v-for="(item,index) in list">{{item}}+-------------+{{index}}</div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{list:['yellow','blue','green']},methods:{change:function(){this.flag=!this.flag}}})</script></body>
</html>

就会创建出三个li 出来：

二，v-for遍历对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">[v-cloak]{display:none}#app{width: 20%;margin: 200px auto;line-height: 40px;border: 1px solid #ccc;padding: 10px;}#app >.test{height: 30px;width: 100%;background: blue;}</style></head><body><div id="app"><div v-for="(value,key,index) in obj">{{value}}-------------{{key}}-------------{{index}}</div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{obj:{name:"zhangsan",age:20,sex:"male"}},methods:{change:function(){this.flag=!this.flag}}})</script></body>
</html>

三，v-if和v-for的结合使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">[v-cloak]{display:none}#app{width: 20%;margin: 200px auto;line-height: 40px;border: 1px solid #ccc;padding: 10px;}#app >.test{height: 30px;width: 100%;background: blue;}</style></head><body><div id="app"><div v-if="index==1" v-for="(value,key,index) in obj">{{value}}-------------{{key}}-------------{{index}}</div><!-- 只有index等于1的时候，才会渲染出这个元素 --></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{obj:{name:"zhangsan",age:20,sex:"male"}},methods:{change:function(){this.flag=!this.flag}}})</script></body>
</html>

vue学习笔记-8-循环结构相关推荐

Lawliet|C语言学习笔记5——循环结构
C语言学习笔记--循环结构 1.求1+2+3+-+100 #include<stdio.h> int main() {int i=1,sum=0; //定义变量i的初值为1,sum的初值为 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记---------Vue2
Vue学习笔记---------Vue2 1. Hello,world! 插值语法: 用 {{ xxx }} 插入一个值 ,该值在data中自定义内容. <body><div id= ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
oracle:oracle学习笔记(四)循环、光标、异常、瀑布模型
oracle学习笔记:循环.光标.异常文章目录打印Hello World 定义基本变量引用型变量(单行)` my_name emp.ename%type ` 记录型变量(多行) `emp_rec ...
Vue学习笔记（三） —— 前后端交互
简介本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
5G NR学习笔记：帧结构和物理资源
5G NR学习笔记:帧结构和物理资源参数集(numerology) 与LTE的参数集(子载波间隔和符号长度)不同,NR支持不同的子载波间隔(Sub-Carrier Spacing, SCS),所有的 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...

vue学习笔记-8-循环结构

一，v-for遍历数组

二，v-for遍历对象

三，v-if和v-for的结合使用

vue学习笔记-8-循环结构相关推荐

最新文章

热门文章