v-model可以輕松的實(shí)現(xiàn)用戶輸入與狀態(tài)的雙向綁定
Vue創(chuàng)建一個(gè)msg數(shù)據(jù)
const app = new Vue({
el: '#app',
data:{
msg:"我是一段文字"
}
})
在html中創(chuàng)建一個(gè)input
<input v-model="msg" type="text" placeholder />
使用了v-model將msg進(jìn)行了綁定
并在下方創(chuàng)建一個(gè)div用來(lái)顯示msg內(nèi)容
<div class="title">{{msg}}</div>
完整的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model測(cè)試</title>
<style type="text/css">
input{
outline: none;
padding: 10px;
margin-bottom: 20px;
width: 400px;
}
.title{
border: none;
box-shadow: 0 0 2px 2px #DDDDDD;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<h1 >測(cè)試v-model</h1>
<input v-model="msg" type="text" placeholder />
<div class="title">{{msg}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
msg:"我是一段文字"
}
})
</script>
</body>
</html>
頁(yè)面顯示效果
這時(shí)候姻政，在輸入框輸入文字，將會(huì)看到，輸入的內(nèi)容實(shí)時(shí)顯示在了下方声搁，這就是雙向綁定诅炉。
利用v-model 可以輕松的實(shí)現(xiàn)跨新。
