v-bind：綁定屬性
v-bind綁定屬性敢伸，v-bind:屬性名=‘值’遇骑，v-bind :屬性名=‘值’
v-model 雙向數(shù)據(jù)綁定
<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標簽里也要現(xiàn)實msg.打開頁面我們發(fā)現(xiàn)當向input中輸入內(nèi)容時羡藐，p標簽中的值會隨著input中的內(nèi)容變化，這就是一個最簡單的雙向數(shù)據(jù)綁定
v-for:對數(shù)組或?qū)ο筮M行循環(huán)操作
<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:{//存放函數(shù)(方法)
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>
