v-bind：绑定属性
v-bind绑定属性，v-bind:属性名=‘值’，v-bind :属性名=‘值’
v-model 双向数据绑定
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p>{{msg}}</p>
</div>
<script src='./js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
msg:''
}
})
</script>
我们把msg绑定到input元素上，同时p标签里也要现实msg.打开页面我们发现当向input中输入内容时，p标签中的值会随着input中的内容变化，这就是一个最简单的双向数据绑定
v-for:对数组或对象进行循环操作
<div id='box'>
<ul>
<li v-for='val in ars'>{{val}}</li>
</ul>
</div>
<script src='./js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
ars:['香蕉','苹果','鸭梨']
}
})
</script>
v-on:事件绑定
<div id='itany'>
<button v-on:click='alt'>点击</button>
</div>
<script src='../vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello world'
},
methods:{//存放函数(方法)
alt:function(){
alert(this.msg)
}
}
})
</script>
v-show/v-if
控制元素的显示或隐藏 display:none
&& 与
|| 或
// 有假与为假，有真或为真
！ 非 取反
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="itany">
<button @click='chg'>切换</button>
<div class="box" v-show='see'></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
see:true
},
methods:{
chg:function(){
this.see=!this.see
}
}
})
</script>
</body>
</html>
v-show/v-if都可以控制元素的显示和隐藏，但是方式不一样，v-show使用的是display:none来控制的，v-if使用的是visibility:hidden来控制的
display：none 不显示
visibility：hidden 隐藏可见性
不显示就是啥都没有，隐藏可见性有可能是文字或图像与背景一致，人看不到，实际上还是显示了的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
<p v-if='num==0'>00000000000000000</p>
<p v-if='num==1'>11111111111111111</p>
<p v-if='num==2'>22222222222222222</p>
<p v-if='num==3'>33333333333333333</p>
<p v-if='num==4'>44444444444444444</p>
<p v-if='num==5'>55555555555555555</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'.box',
data:{
// num:Math.floor(Math.random()*(max-min+1)+min)
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
