01 .if判断
在标签内增加 v-if 来判断当前标签是否显示
例如: <p v-if='布尔变量'> 测试</p>
在vue对象描述中对应设置: var vm=new Vue({ data{布尔变量:true }}) //变量设置好后就可以通过其他操作随时修改
02 动画
所有标签可以加载<transition> </transition>标签来进行vue动画绑定,(这只是方法之一,更多方法查vue手册)
例子:一个标签淡出隐藏的动画
body中: <transition name = '动画方案1'>
<p >测试</p>
</transition>
css中:
<style type="text/css">
.fade-enter-active, .fade-leave-active { 动画开始
transition: opacity .5s //动画的属性和时长
}
.fade-enter, .fade-leave-active { 动画结束
opacity: 0 //动画目标值
}
</style>
<附加小技巧:subline中动画css的兼容性一次输入,可以使用 trsf 自动写入>
03 循环 v-for
可以用v-for实现标签循环加载
在body中: <ul><li v-for="item in nr1>{{ item.text}} </ul> //从nr1数组变量中进行遍历获取值
在vue对象中 data:{nr1:[{text:'字符串1'},{text:'字符串2'}] } 设置一个nr1数组并装载值
可以在其中用方法来操作nr1元素值,标签会动态更新.比如
动态增加一个元素: vm.nr1.push({text:'新增字符串'})
动态删除一个元素 vm.nr1.splice(1,1) //删除从下标1开始的1个元素
04 双向绑定 v-model //
在表单输入标签加入 后可以实现双向绑定,实时修改,则会让被绑定变量所影响的标签实时刷新
在body中:<p>{{bdnr}}</p>
<input type='text' v-model="bdnr">
//-------------本次记录对应的实践代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js"></script>
<style type="text/css">
.fade-enter-active, .fade-leave-active {
transition: all .5s
}
.fade-enter, .fade-leave-active {
-webkit-transform:translate(-200px,5px);
-moz-transform:translate(-200px,5px);
-ms-transform:translate(-200px,5px);
transform:translate(-200px,5px);
}
</style>
</head>
<body>
<div id="bl1" >
{{show1}}
<transition name = 'fade'> <!--动画方式-->
<p v-if='yn'>woowowowoow</p> <!--隐藏or显示标签-->
</transition>
<button v-on:click="chgshow">ddd</button>
<button v-on:click="tj">添加</button>
<button v-on:click="sc">删除</button>
<ul>
<li v-for='item in nr1'>{{item.text}}</li> <!--循环读取nr1数组-->
</ul>
<p>{{bdnr}}</p>
<input type='text' v-model="bdnr">
</div>
</body>
<script type ='text/javascript'>
var vm = new Vue({
el:'#bl1',
data:{
bdnr:'test',
show1:'kkkkkkk',
yn:true,
nr1:[
{text:'aaaaa'},
{text:'bbb'},
{text:'1aaaaa'},
]
},
methods:{
chgshow:function(){
this.show1='addddd',
this.yn=!this.yn
},
tj:function(){
this.bdnr="xiugaixiugia",
this.nr1.push({text:"zengja"}) //增加 zhengja 到列表内
},
sc:function(){
this.nr1.splice(1,1) //移除指定下标的1个
}
// chgshow:funciton(){ this.show1='ddddd' }
}
})
</script>
</html>