孫空空的Vue之路-Day04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>條件渲染</title>
</head>
<body>
<!--條件渲染-->
<!-- v-if -->
<!-- v-else -->
<!-- v-show -->
<div id="demo">
<!--v-if和v-else的展示操作-->
<p v-if="flag">愛你</p>
<p v-else>不愛你</p>
<button @click="flag=!flag">改變從此刻發生</button>
<!--v-show的展示-->
<p v-show="ok">結婚</p>
<p v-show="!ok">不結婚</p>
<button @click="ok=!ok">改變從此刻發生</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
flag:false,
ok:false
}
})
</script>
</body>
</html>
v-if 、v-else 和 v-show的區別
1.v-if 、v-else:在進行條件顯示時,記憶體不會保留否定的條件,如果當前頁面要進行大量的條件顯示不建議使用。
2.v-show:進行條件顯示時,當前頁面會保留否定條件的頁面,如果頁面進行大量的條件顯示推薦使用。
【ps】作為Vue的小白,如果有錯誤資訊,希望大家在評論取留言指正,謝謝大家~
相關文章
- Day04:
- Day04
- Dubbo——Day04
- vue升級之路(三)-- vue-router的使用Vue
- vue大型電商專案尚品彙(後臺篇)day04Vue
- 第二篇:"空空如也"的部落格應用
- day04 函式函式
- 科大訊飛百億級互動業務的缺陷預防之路 - 孫玉
- vue-學習之路Vue
- Vue 進階之路(十四)Vue
- day04 -js04JS
- 嵌入式day04
- 一個小白的vue之路(一)——關於vue的簡單瞭解Vue
- vue升級之路(四)-- VuexVue
- VUE 3.0 初體驗之路Vue
- Day04——Java新手學習Java
- ## day04總結(作業)
- 多執行緒Day04執行緒
- 機器學習day04機器學習
- vue元件之路之輪播圖的實現Vue元件
- Vue開發之路:資料篇Vue
- Vue開發之路由進階Vue路由
- 後端開發者的Vue學習之路(五)後端Vue
- vue元件之路之Tabs標籤頁Vue元件
- Vue學習筆記之路由篇Vue筆記路由
- vue-router路由之路-極簡教程Vue路由
- day04 必備基礎知識
- JS的平凡之路–模仿Vue寫個陣列監聽JSVue陣列
- 小白的進階之路之vue原始碼解讀(0)Vue原始碼
- vue元件之路之menu導航選單Vue元件
- Mybatis整合Spring(ssm整合待續)-day04MyBatisSpringSSM
- Node.js學習筆記----day04Node.js筆記
- 學習筆記--Web基礎day04筆記Web
- Blazor和Vue對比學習(基礎1.6):祖孫傳值,聯級和注入BlazorVue
- TT建站之路--vue專案基礎框架搭建【01】Vue框架
- 傳智黑馬python基礎學習——day04Python
- Java之品優購課程講義_day04Java
- 一個小白的vue之路(四)——搭建自己的後臺管理開發框架(1)Vue框架