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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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
透析PHP的配置文件php.ini
2006/10/09 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
Python多线程编程简单介绍
2015/04/13 Python
深入浅出学习python装饰器
2017/09/29 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
司机辞职报告范文
2014/01/20 职场文书
企业内部培训方案
2014/02/04 职场文书
开学典礼主持词
2014/03/19 职场文书
表彰会主持词
2014/03/26 职场文书
致共产党员倡议书
2014/04/16 职场文书
化学专业自荐信
2014/05/28 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
《给予树》教学反思
2016/03/03 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技