1. 程式人生 > >Vue的安裝和語法

Vue的安裝和語法

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>
    var
app=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的安裝和語法