2017-3-7
Vue.js初探
留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<form>
<label for="name">用户名</label><br>
<input type="text" id="name" v-model="user"><br>
<label for="content">留言内容</label><br>
<textarea id="content" v-model="content"></textarea><br>
<input type="button" value="提交" @click="add()">
</form>
<table>
<tr>
<th>序号</th>
<th>用户名</th>
<th>内容</th>
</tr>
<tr v-for="value in json">
<td>{{$index+1}}</td>
<td>{{value.user}}</td>
<td >{{value.content}}</td>
<td><button @click="remove($index)">删除</button></td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#box",
data:{
json:[],
user:"",
content:""
},
methods:{
add:function(){
var obj={user:this.user,content:this.content};
this.json.push(obj)
this.user=""
this.content=""
},
remove:function(index){
this.json.splice(index,1)
}
}
})
</script>
</body>
</html>
显示/隐藏 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换div</title>
</head>
<body>
<div id="box">
<button v-on:click="show()">显示/消失</button>
<div style="width: 300px;height: 300px;background-color: orangered;" v-show="a"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
a:true
},
methods:{
show:function(){
if(this.a==true){
this.a=false
}else{
this.a=true
}
}
}
})
</script>
</body>
</html>