vue基礎---01條件渲染
阿新 • • 發佈：2021-09-13
00.vue程式碼架構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 【注意】：MVVM(Model-View- Controller)指：即模型-檢視-檢視模型； 【模型】指的是後端傳遞的資料； 【檢視】指的是所看到的頁面； 【檢視模型】mvvm模式的核心，它是連線view和model的橋樑。 --> <!-- 表示此div要用vue框架 --> <!-- {{}}裡面是模板變數 --> <div id="app"><!-- 這裡就是檢視部分VIEW--> {{title}} </div> <script type="text/javascript"> // 例項化上面的物件 var app=new Vue({ // 配置引數 // el表示在那個元素上使用vue框架 el:"#app", // 下面的data就是模型部分Model；VM相當於vue.js，用於將檢視和模型關聯起來 data:{ title:"hello vue!" } }) </script> </body> </html>
01.v-if（條件語句）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-if</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> v-if:控制切換一個元素是否顯示; v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別; v-if與v-else之間不能有其他元素 <div id="app"> <h1>使用者名稱：{{username}}</h1> <h3 v-if="isVip">使用者型別：VIP</h3> <h3 v-else>使用者型別：普通使用者</h3> <hr/> <h1>使用者允許登陸時間</h1> <h3 v-if="age>24">允許登入12小時</h3> <h3 v-else-if="age>12">允許登入8小時</h3> <h3 v-else>允許登入4小時</h3> </div> <script> var app=new Vue({ el:'#app', data:{ username:"小明", isVip:true, age:24 } }) </script> </body> </html>
02.v-show(條件展示元素)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-show</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style type="text/css"> #pana{ width:100px; height:100px; background:red; } </style> </head> <body> <div id="app"> <div v-show="isShow" id="pana"> nihao </div> <button @click="showPana">切換</button> </div> <script> var app=new Vue({ el:"#app", data:{ isShow:true }, methods:{//方法 showPana:function(){ app.isShow=!app.isShow; } } }) </script> </body> </html> <!--v-show:簡單地切換元素的cssdiaplay屬性--> v-show與v-if的區別: v-if:不顯示時，第一次就直接不渲染，如果時內容已經顯示將其改為不顯示，將內容直接從Dom去除 v-show:不顯時，就會改為display:none,但是會渲染在Dom上,反覆需要切換的內容，使用v-show