vue之vshow基本使用
生活随笔
收集整理的這篇文章主要介紹了
vue之vshow基本使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
v-show：根據表達值的真假，切換元素的顯示和隱藏
v-show 本質是切換元素的 display
<body>
<div id="app">
<input type="button" value="切換顯示狀態" @click="changeIsShow"><br>
<img v-show="isShow" src="img/monkey.png" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: false,
age: 17
},
methods: {
changeIsShow: function () {
this.isShow =! this.isShow;
}
}
})
</script>
</body>
點擊切換狀態 顯示/隱藏
增加 age 累加效果
<body>
<div id="app">
<input type="button" value="切換顯示狀態" @click="changeIsShow"><br>
<input type="button" value="累加年齡" @click="addAge">
<img v-show="isShow" src="img/monkey.png" alt="">
<img v-show="age>=18" src="img/monkey.png" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: false,
age: 17
},
methods: {
changeIsShow: function () {
this.isShow =! this.isShow;
},
addAge: function () {
this.age++;
}
}
})
</script>
</body>
當點擊累加年齡時，就會出現 圖片，因為默認給定的age=17，累加年齡后就會顯示 圖片
本文來自博客園，作者：兮動人，轉載請注明原文鏈接：https://www.cnblogs.com/xdr630/p/15254769.html
總結
以上是生活随笔為你收集整理的vue之vshow基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++string与int的相互转换（使
- 下一篇： 快讯|地平线旭日3成功部署14亿参数大语