Vue v-if以及 v-else 的使用
Vue v-if以及 v-else 的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="ok">現在你可以看到我了</p>
<p v-else>隱藏了</p>
<template v-if="seen">
<h1>菜鳥教程</h1>
<p>學的不僅是技術,更是夢想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
ok:true,
seen:true,
}
})
</script>
</html>
結果:
把OK該為false
然後我們在看看效果:
相關文章
- 巧妙使用Vue.extend繼承元件實現el-table雙擊可編輯(不使用v-if和v-else)Vue繼承元件
- 前端【VUE】02-vue指令【v-html 、v-show、 v-if 、v-else、v-on、v-bind、v-for、v-model】前端VueHTML
- vue.js:最簡單的v-if運用Vue.js
- vue.js顯示與隱藏(v-if)Vue.js
- vue常量定義以及使用Vue
- petite-vue原始碼剖析-v-if和v-for的工作原理Vue原始碼
- vue 基礎入門筆記 05:v-for、v-ifVue筆記
- Vue2.5筆記:v-if 和 v-show指令Vue筆記
- 如何在 Vue 中使用 JSX 以及使用它的原因VueJS
- (精華2020年5月4日更新) vue教程篇 v-show和v-if的使用Vue
- 2.Vue3的核心api特性以及使用方式VueAPI
- framework7的改進,以及與vue組合使用遇到的問題以及解決方法 (附vue的原理)FrameworkVue
- Vue 中 $on $once $off $emit 詳細分析,以及使用VueMIT
- Vue 框架-06-條件語句 v-if 實現選項卡效果Vue框架
- element-plus的CDN引用以及結合VUE3使用Vue
- v-if和v-show
- v-if和v-show的區別
- v-if與v-show造成部分元素丟失的問題——v-if複用元素問題
- 在Vue專案中使用npm安裝bootstrap以及jqueryVueNPMbootjQuery
- JS實現一個v-ifJS
- vue中select的使用以及select設定預設選中Vue
- 初級Vue以及基本指令Vue
- Vue中使用CSS前處理器 stylus以及配置全域性變數的方法VueCSS變數
- 每天學一點 Vue3(一) CND方式的安裝以及簡單使用Vue
- 會使用基本的Render函式後,就會想,這怎麼用 v-for/v-if/v-model;我寫個vue Render函式進階...函式Vue
- 使用vue中後臺效能優化以及移動端優化Vue優化
- vue router 如何使用params query傳參,以及有什麼區別Vue
- vue中常見的問題以及解決方法Vue
- vue3 模板編譯 —— 我竟把 v-if 和 v-for 的優先順序改回來了,不信你看 ?Vue編譯
- vue例項以及生命週期Vue
- 淺談Vue中的資料繫結的實現,以及Vue3.0的proxyVue
- 手摸手教你在vue-cli裡面使用vuex,以及vuex簡介Vue
- vue的資料劫持以及運算元組的坑Vue
- mongodb的安裝以及使用MongoDB
- github的安裝以及使用Github
- Genymotion的安裝以及使用
- 使用Vue實現後臺管理系統的動態路由以及側邊欄選單Vue路由
- v-if/v-show 條件渲染指令