vue.js 내장 순환,if 판단,동적 삭제 인 스 턴 스
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 1.0 과 vue 2.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);
}
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue.js + Google Places: 여러 입력 필드 자동 완성경우에 따라 두 개 이상의 입력 필드에 장소 자동 완성 기능을 추가할 수 있습니다. 일반적인 예는 두 위치 사이의 이동 거리를 찾는 것입니다. 이 경우 사용자는 자동 완성 기능이 활성화된 두 개의 입력 필드를 갖게 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
