vue中的v-show，v-if，v-bind
阿新 • • 發佈：2021-02-16
v-show
根據表示式的真假，切換元素的顯示和隱藏。原理是修改display。指令後面的內容可以為布林值也可以為表示式，最終都會解析為布林值，值為true時元素顯示，為false時元素隱藏。表示式的值改變後，對應元素的狀態會更新。
<div id="app">
<button @click="changeIsShow">顯示隱藏狀態切換</button>
<button @click="addAge" 在程式執行後，首先顯示兩個切換狀態的按鈕和一條高先生的語句，預設年齡為16歲，點選“顯示隱藏狀態切換”按鈕，切換第二條高先生的顯示狀態，每點選一次增加年齡，即會增加一歲相應的年齡，年齡到達十八歲後，顯示第三條語句。
程式執行後為：
三條語句顯示後：
v-if
根據表達值的真假，切換元素的顯示和隱藏。與v-show類似，但是v-show自始至終都在dom樹中存在，只是改變了其display，而v-if則是去除其dom元素，需要時再添加回來。在使用時頻繁切換的元素用v-show，反之用v-if。
v-bind
設定元素屬性，在書寫時，可以省略v-bind。
<body>
<div id="bpp">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="" :title="imgTitle+'!!!!'">
</div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var bpp = new Vue({
el:"#bpp",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"黑馬程式設計師"
}
})
</script>
</body>
