1.v-model:雙向綁定元素清寇,一般用于表單元素。
<div id="itany">
<button v-on:click="alt">按鈕<button>
<script src="vue/js/vue.js"></script>
<script>
var vm=new Vue({
el:"#itany",
data:{
msg:"hello"
},
methods:{
alt:function(){
console.log(vm.msg)
}
}
})
</script>
2.v-show:控制元素的顯示和隱藏兰绣。
<div id="itany">
<h3>{{msg}}</h3>
<h1 v-show="!see">{{msg}}</h1>
</div>
<script src="vue/js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue",
see:true
}
})
</script>
3.v-bind:用于綁定屬性。
<div id="itant">
<img v-bind:src="url" alt="">
</div>
<script src="vue/js/vue.js"></script>
<script>
new Vue({
el:"#itant",
data:{
url:"images/3.jpg"
}
})
</script>
4.v-if或v-else或v-else-if
<div id='itany'>
<p v-if='num==0'>00000000000</p>
<p v-else-if='num==1'>1111111111</p>
<p v-else-if='num==2'>22222222</p>
<p v-else-if='num==3'>22222222</p>
<p v-else-if='num==4'>22222222</p>
<p v-else='num==5'>555555555555</p>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()(max-min+1)+min) 隨機數(shù)的計算公式
num:Math.floor(Math.random()(5-0+1)+0) |
}
})
</script>
5.visibity和display的區(qū)別:
display通巢度澹可以設(shè)置為none望几、inline、block
visibility通酬瑁可以設(shè)置為hidden暇藏、visible
當display為none,visibility為hidden時濒蒋,元素都會不見盐碱。不過其還有不同之處。
display會將元素隱藏掉沪伙,并且位置不再被占據(jù)瓮顽,而visibility則是占據(jù)原來的位置。