<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src='jquery.min.js'></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src='vue.min.js'></script>
</head>
<body>
<!-- 模板 将Vue的变量卸载{{}}中-->
<div id='box'>
<form action=''>
<div class="form-group">
<label for="exampleInputEmail1">姓名</label>
<input type="text" class="form-control" v-model='name'>
</div>
<div class="form-group">
<label for="exampleInputPassword1">年龄</label>
<input type="text" class="form-control" v-model='age'>
</div>
</form>
<button class="btn btn-success" @click='submit'>确定</button>
<button class="btn btn-primary" @click='sort'>按年龄排序</button>
<table class='table table-bordered table-striped table-hover' style='text-align:center;'>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>选项</th>
</tr>
<tr v-for='(item,i) in people'>
<!-- 序号最好用下标值，可以随着我们的删除而自动更新 -->
<td>{{i+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-danger btn-sm" @click='del(i)'>删除</button>
</td>
</tr>
<tr v-show='people.length===0?true:false'>
<td colspan="4">请输入数据</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#box',
data:{
name:'',
age:'',
people:[]
},
methods:{
submit(){
this.people.push({
name:this.name,
age:this.age
});
},
del(i){
if(window.confirm('确认要删除吗？')){
this.people.splice(i,1);
}else{
return;
}
},
sort(){
let len = this.people.length;
for(var i=0;i<len;i++){
for(var j=0;j<len-i-1;j++){
if(Number(this.people[j]['age'])>Number(this.people[j+1]['age'])){
// 注意：在这里用普通的元素交换时虽然people数组改变但是并不会重新渲染，故要用Vue.set()方法来强制渲染
let temp = this.people[j];
Vue.set(this.people,j,this.people[j+1]);
Vue.set(this.people,j+1,temp);
}
}
}
}
}
});
</script>
</body>
</html>vue--练习（登录demo）
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/80848798
今日推荐
周排行