vue.js 嵌套循环、if判断、动态删除的实例


Posted in Javascript onMarch 07, 2018

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API

app.html

<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
	<title>
	vuejs 嵌套循环、if判断
	</title>
	<style type="text/css">
		[v-cloak] { display: none }
	</style>
</head>
<body>
 <div id="app">
		
		<table>
			<tr>			
				<td >id</td>
				<td >姓名</td>
				<td >手机号</td>
				<td >城市</td>
				
				<td >通过审核</td>
				<td >我的学生</td>
				<td >操作</td>				
			</tr>
		 <tr v-for="(item,index) in list "> 
			 <td>{{item.id}}</td> 
			 <td>{{item.name}}</td>
			 <td>{{item.tel}}</td> 
				
			 <td>{{item.province}}_{{item.city}}</td> 
				<td v-if="item.status==1">是</td> 
				<td v-else-if="item.status==0">否</td> 
				<td >
					<span v-for="stu in item.stu ">
					{{stu.name}},
					</span>
				</td> 
				<td>
				 <button v-on:click="edit">修改</button>
				 <button v-on:click="del(index)">删除</button>
				</td> 
		 </tr>
		</table>
 </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
 new Vue({ 
		el: '#app', 
	 methods: { 
			del:function(index){
				this.list.splice(index,1);
			},
			edit: function () {
				alert('修改')
			},
		},
	 data: {
			"list":[{
				"id":"139",
				"name":"王五",
				"tel":"13681829898",
				"status":"1",
				"province":"省",
				"city":"市",
				"sex":"1",
				"stu":[{
					"id":"200",
					"name":"学生1",
					"tel":"13681829898",
				},{
					"id":"201",
					"name":"学生2",
					"tel":"13681829898",
				}],
			},
			{
				"id":"138",
				"name":"麻子",
				"tel":"13681829898",
				"status":"0",
				"province":"省",
				"city":"市",
				"sex":"0",
				"stu":[{
					"id":"300",
					"name":"学生31",
					"tel":"13681829898",
				},{
					"id":"301",
					"name":"学生32",
					"tel":"13681829898",
				}],
			},
			{
				"id":"137",
				"name":"丽丽",
				"tel":"15152882891",
				"status":"0",
				"province":"省",
				"city":"市",
				"sex":"1",
				"stu":[{
					"id":"400",
					"name":"学生41",
					"tel":"13681829898",
				},{
					"id":"401",
					"name":"学生42",
					"tel":"13681829898",
				}],
			},
			{
				"id":"136",
				"name":"娜娜",
				"tel":"15152882891",
				"status":"0",
				"province":"省",
				"city":"市",
				"sex":"0",
				"stu":[{
					"id":"500",
					"name":"学生51",
					"tel":"13681829898",
				},{
					"id":"501",
					"name":"学生52",
					"tel":"13681829898",
				}],
			}]
	 }
	})
})
</script>
</html>

vue.js 嵌套循环、if判断、动态删除的实例

vue1.0和vue2.0循环索引使用区别

如果是vue1.0这样写:
<ol>
   <li v-for="todo in todos" @click="delete($index)">
     {{todo.label}}
   </li>
</ol>
然后:
methods:{
 
 delete:function(index){
  this.todos.splice(index,1);
 }
}
如果是vue2.0这样写:
<ol>
    <li v-for="(todo,index) in todos" @click="delete(index)">
     {{todo.label}}
    </li> 
</ol>
然后
methods:{
 
 delete:function(index){
  this.todos.splice(index,1);
 }
}

以上这篇vue.js 嵌套循环、if判断、动态删除的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 #Javascript
Vue中v-for的数据分组实例
Mar 07 #Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 #Javascript
在vue项目中,使用axios跨域处理
Mar 07 #Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 #Javascript
You might like
关于js与php互相传值的介绍
2013/06/25 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
js Calender控件使用详解
2015/01/05 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python素数检测的方法
2015/05/11 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
中英文自我评价语句
2013/12/20 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
乡下人家教学反思
2014/02/01 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
学期个人自我总结
2015/02/13 职场文书
推普标语口号大全
2015/12/26 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android