專業(yè)做公司宣傳網(wǎng)站網(wǎng)站seo優(yōu)化步驟
調(diào)了半天沒反應,結果是沒引用Vue,我是傘兵。
v-model
的作用是將視圖與數(shù)據(jù)雙向綁定。一般情況下,Vue是數(shù)據(jù)驅動的,即數(shù)據(jù)發(fā)生改變后網(wǎng)頁就會刷新一次,更改對應的網(wǎng)頁內(nèi)容,即數(shù)據(jù)單向綁定了網(wǎng)頁內(nèi)容。而使用v-model
雙向綁定之后,網(wǎng)頁發(fā)生改變(例如輸入框)也會對應的修改數(shù)據(jù)。方便我們快速的修改/獲取網(wǎng)頁上的內(nèi)容。
語法為v-model=變量名
一個簡單的實例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><div id="app"><label>用戶名:<input type="text" v-model="username" placeholder="請輸入用戶名"></label> <br><!--br是換行符--><button @click="reset">重置</button></div><script>const app = new Vue({el: "#app",data:{username: ""},methods:{reset(){this.username = ""}}})</script></body>
</html>
在這個例子中,直接修改數(shù)據(jù)或者在輸入框里輸入內(nèi)容都會直接的影響另一方的數(shù)據(jù)。