1.v-for
v-for ： 指令根据一组数组的选项列表进行渲染。（循环操作）
例： v-for=“”
2.v-model
v-mode ： 双向数据绑定(主要用于表单元素)
例： v-mode=“”
<div id="xianqi">
<input type="text" v-model="mes">
<p>{{mes}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#xianqi",
data:{
mes:''
}
})
</script>
3.v-on
v-on:事件=‘函数名’
例 ： v-on:click=‘函数名’ 【简写 ： @click=‘ ’】
<div id="itany">
<!--点击按钮-->
<button v-on:click="alt">点击</button>
</div>
<script type="text/javascript">
var a=new Vue({
el:"#itany",
data:{
mes:"hello Kity"
},
methods:{//主要用来存放函数
alt:function(){
//console.log(this.mes)
console.log(a.mes)
}
}
})
</script>
点击按钮切换
<div id="itany" v-for="{{mse}}">
{{mse}}
<button v-on:click="att">点击</button>
</div>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
mse:'hello kity',
may:'hello',
},
methods:{
att:function(){
this.mse=this.may
}
}
})
</script>
4.v-bind
v-bind : 绑定一个属性
写法 ： v-bind：属性名=‘’ 【简写：属性名=‘值’】
<div id="itany">
<img v-bind:src="url" alt="" />
</div>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
url:'images/1.jpg'
}
})
</script>
下标图片切换
<div id="itany">
<img v-bind:src="url" alt="" />
<ul>
<li v-for="(value,index) in urls" v-on:click="art(index)">{{index+1}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
url:'images/1.jpg',
urls:['images/1.jpg','images/2.jpg','images/3.jpg']
},
methods:{
art:function(ind){
this.url=this.urls[ind]
}
}
})
</script>
5.v-show
v-show : 控制元素显示或隐藏 （用display：none 来隐藏）
例： v-show=“”
v-show="true/false" 控制元素显示/隐藏
<div id="itany">
<p>{{arr}}</p>
<h2 v-show="!arrs">{{arr}}</h2>
</div>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
arr:'hello',
arrs:ture
}
})
</script>
逻辑运算符
- ! (非)
- && （与） 有假毕假
- || (或) 有真则真
隐藏显示
<div id="itany">
<button v-on:click="alt">隐藏显示</button>
<div class="box" v-show="arr"></div>
</div>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
arr:true
},
methods:{
alt:function(){
this.arr=!this.arr
}
}
})
</script>
6.v-if， v-else-if ， v-else
v-if : 控制元素显示或隐藏 ( 用visibility:hiodden 来隐藏)
v-else ： v-else要紧跟在v-if后面，表示v-if条件不成立时执行
v-else-if ： 表示多次，在v-if和v-else中间
<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='num==4'>吴希泽</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()*(4-0+1)+0)
}
})
</script>
