一、添加用户 表格练习
body部分：
<div id="itany" class="container">
<h3 class="text-center">添加用户</h3>
<form>
<div class="form-group">
<label for="name">用户名</label>
<input type="text" id="name" placeholder="请输入用户名" class="form-control" v-model="arrs.name">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" id="age" placeholder="请输入年龄" class="form-control" v-model="arrs.age">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="text" id="email" placeholder="请输入邮箱" class="form-control" v-model="arrs.email">
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-success" v-on:click='add' value="添加">
<!-- <input type="button" class="btn btn-info" value="重置">-->
<input type="reset" class="btn btn-info" value="重置">
</div>
</form>
<table class="table table-bordered">
<h4 class="text-center text-info">用户列表</h4>
<thead>
<tr>
<th class="text-center">编号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">邮箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for='(value,index) in arr'>
<td class="text-center">{{index+1}}</td>
<td class="text-center">{{value.name}}</td>
<td class="text-center">{{value.age}}</td>
<td class="text-center">{{value.email}}</td>
<td class="text-center">
<button class="btn btn-active" v-on:click="del(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
arr:[
{name:'jack',age:'18',email:'123@126.com'},
{name:'rose',age:'19',email:'456@126.com'},
{name:'jhon',age:'20',email:'789@126.com'}
],
arrs:[
{name:'',age:'',email:''}
]
},
methods:{
add:function(){
this.arr.push(this.arrs),
this.arrs={name:'',age:'',email:''}
},
del:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
</body>
效果图：
添加用户表格练习.png
二、
v-if/v-else/v-else-if：条件渲染
<div id="itany">
<p v-if="num==0">000000000000</p>
<p v-else-if="num==1">1111111111111</p>
<p v-else-if="num==2">222222222222</p>
<p v-else-if="num==3">3333333333</p>
<p v-else-if="num==4">444444444444444</p>
<p v-else="num==5">55555555555555</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()*(max-min+1)+min)
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
三、v-once\v-pre
v-once:只绑定一次
v-pre:原样输出
<div id="itany">
<input type="text" v-model="msg">
<!-- v-once只绑定一次-->
<p v-once>{{msg}}</p>
<!-- v-pre原样输出-->
<p v-pre>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:'hello vue'
}
})
</script>
效果：
v-once v-pre.png
四、v-html\v-text
v-html:可以解析标签
v-text:不可以解析标签
<div id="itany">
<input type="text" v-model="msg">
<!-- v-html可以解析标签-->
<p v-html="msg">{{msg}}</p>
<!-- v-text不可以解析标签-->
<p v-text="msg">{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
}
})
</script>
五、v-cloak生命周期
这个指令保持在元素上直到关联实例结束编译，
和 CSS 规则如 [v-cloak] { display: none } 一起用时，
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
css部分：
<style>
[v-cloak] {
display: none;
}
</style>
body部分：
<body>
<div id="itany">
<p v-cloak>{{msg}}</p>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
beforeMount:function(){
alert(111)
}
})
</script>
六、过滤器
过滤器：对显示在页面上的数据进行处理筛选操作
格式：
html部分：{{8|过滤器的名字}}
js部分：Vue.filter('过滤器的名字',function(函数名){
})
案例：
body部分：
<div id="itany">
<p>{{8|addZero}}</p>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
Vue.filter("addZero",function(data){
if(data<10){
return '0'+data;//小于10时，输出‘0’+数字
}else{
return data;//大于10时，直接输出数字
}
})
new Vue({
el:'#itany',
data:{
msg:''
}
})
</script>
