VUE第二节知识点

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) 随机数的计算公式
num:Math.floor(Math.random()
(5-0+1)+0) |
}
})
</script>

5.visibity和display的区别:

display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。
display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,497评论 0赞 6
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 5,021评论 6赞 16
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,235评论 0赞 29
  • 在中国敢于生二胎的都是勇气可嘉的。或者是幸运的。我坚持不生二胎的主要原因是养这个孩子,我的心好累。婆媳关系的处理,...
    清晨的玉兰阅读 453评论 1赞 1
  • 真正的离开。从来不需要解释和招呼。 也许有些事需要时间去消化,就像生病一样。病来如山倒,病去如抽丝。 一切都是注定...
    敢说真话的妖精阅读 341评论 0赞 2

友情链接更多精彩内容