偶偶自己写点前端页面，发现vuejs挺方便的
这次练级使用的是Sam先生的博客的教程
定义数据
var lastIndex = 2,vModel = {
list:[
{
id:0,
cont: '张三'
},
{
id:1,
cont: '李四'
},
],
val: '随便输入点提示'
};
用vuejs使用数据、使用区域及方法
new Vue({
data: vModel,
el:'#app',
methods:{
add: function(){
this.list.push({ id: lastIndex++,cont: this.val});
},
del:function(item){
let index = this.list.indexOf(item);
this.list.splice(index,1);
}
}
})
在html里面使用方法
v-on:click= "add()"
v-on:click= "del(item)"
循环渲染列表
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.cont}}</td>
<td><button class="btn btn-default" v-on:click= "del(item)">del</button></td>
</tr>
以后再附完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>level-0</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入vuejs -->
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<!--输入框 -->
<div class="input-group" style=" margin-top: 20px;">
<input type="text" class="form-control" v-model="val">
<span class="input-group-btn">
<button class="btn btn-default" type="button" v-on:click="add">add!</button>
</span>
</div>
<!-- 列表 -->
<table class="table table-striped">
<caption>数据表格</caption>
<thead>
<tr>
<th>id</th>
<th>cont</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.cont}}</td>
<td><button class="btn btn-default" v-on:click= "del(item)">del</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var lastIndex = 2,vModel = {
list:[
{
id:0,
cont: '张三'
},
{
id:1,
cont: '李四'
},
],
val: '随便输入点提示'
};
new Vue({
data: vModel,
el:'#app',
methods:{
add: function(){
this.list.push({ id: lastIndex++,cont: this.val});
},
del:function(item){
let index = this.list.indexOf(item);
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
网友评论