Examples of vue.js nested loops, if judgments, and dynamic deletion-JS Tutorial-php.cn

Examples of vue.js nested loops, if judgments, and dynamic deletion

亚连

Release： 2018-05-31 17:28:50

Original

1839 people have browsed it

Below I will share with you an example of vue.js nested loop, if judgment, and dynamic deletion. It has a good reference value and I hope it will be helpful to everyone.

Vue.js is a very popular JavaScript MVVM library. It is built with data-driven and component-based ideas. Compared with Angular.js, Vue.js provides a simpler and easier-to-understand 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>
 <p 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>
 </p>
</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: &#39;#app&#39;, 
	 methods: { 
			del:function(index){
				this.list.splice(index,1);
			},
			edit: function () {
				alert(&#39;修改&#39;)
			},
		},
	 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>

Copy after login

##The difference between vue1.0 and vue2.0 loop index use

如果是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);
 }
}

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

angular5 httpclient example practice

Solving the problem of multiple vue routes sharing one page

An Angular method-level cache annotation (decorator)

The above is the detailed content of Examples of vue.js nested loops, if judgments, and dynamic deletion. For more information, please follow other related articles on the PHP Chinese website!