Vue的安裝和語法
阿新 • • 發佈:2017-08-21
scrip -m 效果 lang charset html code vue 實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <input type="text" v-model="name"> //v-model=name,網頁顯示name的值會指向input標簽所輸入的內容實現動態效果 <span>你的姓名是:{{name}}</span> </div> <div><input type="text" v-model="age"> <span>你的年齡是:{{age}}</span> </div> <div> <input type="text" v-model="sex"> <span v-show="sex">你的性別是:{{sex}}</span> //v-show=sex,在未輸入input內容時會隱藏span標簽內容,在input輸入 </div> //值時顯示 </div> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <script> varapp=new Vue({ el:"#app", data:{ name:"xiaobai", age:22, sex:"male" } }); </script> </body> </html>
v-show與v-if的區別:當v-if後的值判斷為false時,會將該標簽從DOM中刪除,而v-show則會保留而不會將其從DOM中刪除
Vue的安裝和語法