Vue：Vue基礎知識之利用v-if、v-else語句控制頁面文字內容的改變
阿新 • • 發佈：2019-02-07
1、v-if、v-else判斷語句例項
v-if='isLogin' //類似 if else
v-else
v-if:是vue 的一個內部指令，指令用在我們的html中。
v-if用來判斷是否載入html的DOM，比如我們模擬一個使用者登入狀態，在使用者登入後現實使用者名稱稱。
1、index.html檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue.js例項</title> </head> <body> <h1>Vue2.0例項</h1> <hr> <ol> <li><a href='./example/helloword.html'>Hello World例項</a></li> <li><a href='./example/v-if.html'>v-if&v-else&v-show</a></li> </ol> </body> </html>
2、v-if.html檔案
<!DOCTYPE html> <html lang="en"> <head> <title>HelloWorld</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type='text/javascript' src='../assets/js/vue.js' ></script> </head> <body> <h1>v-if&v-else&v-show</h1> <hr> <div id="app" > <!-- 模板的輸出方式，把message變數渲染到模板裡 --> <div v-if='isLogin'> 你好，Jason Niu</div> <div v-else>您還沒有登陸，請登陸！</div> </div> <script type='text/javascript'> //宣告變數且例項化(生成器) var app =new Vue({ el:'#app', data:{ isLogin:false } }) </script> </body> </html>
2、v-show調整css例項
在vue的data裡定義了isLogin的值，當它為true時，網頁就會顯示：你好：JSPang，如果為false時，就顯示請登入後操作。
v-show ：調整css中display屬性，DOM已經載入，只是CSS控制沒有顯示出來。
<div v-show="isLogin">你好：JSPang</div>
v-if 和v-show的區別：
v-if： 判斷是否載入，可以減輕伺服器的壓力，在需要時載入。
v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。
