v-for="" 循环
v-model 双向数据绑定 一般用于表单元素
v-on:事件名 v-on:click="函数名" @click="" 绑定事件
v-show/v-if 控制元素的显示或隐藏
v-bind:属性名='' 简写： ：属性名='' 绑定属性
v-if
v-else
v-else-if
v-html
v-text
v-once 只绑定一次
v-pre 原样输出
v-cloak
过滤器：对显示在页面上的数据进行处理筛选操作
//js
Vue.filter('过滤器的名字',function(data){
})
//html
{{8|过滤器的名字}}
这是添加和删除的一个实例
QQ截图20180915080418.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
<div class="container">
<form action="">
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" placeholder="请输入用户名" v-model='txt.uname'>
</div>
<div class="form-group">
<label for="">年龄</label>
<input type="text" class="form-control" placeholder="请输入年龄" v-model='txt.age'>
</div>
<div class="form-group">
<label for="">邮箱</label>
<input type="text" class="form-control" placeholder="请输入邮箱" v-model='txt.email'>
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-success" value='添加' @click="add">
<input type="button" class="btn btn-info" value='重置'>
</div>
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in user">
<td>{{index+1}}</td>
<td>{{value.uname}}</td>
<td>{{value.age}}</td>
<td>{{value.email}}</td>
<td>
<button @click='delt(index)'>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.container',
data:{
user:[
{uname:'jack',age:18,email:'abc@126.com'},
{uname:'tom',age:19,email:'efg@126.com'},
{uname:'lily',age:20,email:'sed@126.com'}
],
txt:{}
},
methods:{
add:function(){
this.user.push(this.txt)
},
delt:function(ind){
this.user.splice(ind,1)
}
}
})
</script>
</body>
</html>
刷新会随机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<p v-if='num==0'>林林林林林林林</p>
<p v-else-if='num==1'>子子子子子子</p>
<p v-else-if='num==2'>阳阳阳阳阳</p>
<p v-else-if='num==3'>帅帅帅帅帅帅帅</p>
<p v-else-if='num==4'>王王王王王王</p>
<p v-else='num==5'>康康康康康康</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
QQ截图20180915081528.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<input type="text" v-model='wsk'>
<p v-html='wsk'>{{wsk}}</p>
<p v-text='wsk'>{{wsk}}</p>
<p v-once='wsk'>{{wsk}}</p>
<p v-pre='wsk'>{{wsk}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
wsk:'ni hao'
}
})
</script>
</body>
</html>
QQ截图20180915081636.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
[v-cloak]{
display:none;
}
</style>
</body>
<div id="itany">
<p v-cloak>{{wsk}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
wsk:'hello vue'
},
beforeMount:function(){
alert(111)
}
})
</script>
</html>
如果小于10就会是01-09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{1|addZero}}</p>
</div>
<script src='vue.js'></script>
<script>
//全局过滤器
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
网友评论