• 通過v-model綁定輸出數(shù)據(jù)

<script> export default {data(){return {pagestyle:'https://v4.bootcss.com/docs/4.3/dist/css/bootstrap.css',pagecss:'https://v4.bootcss.com/docs/4.3/examples/sticky-footer-navbar/sticky-footer-navbar.css',mytitle:'v-bind bootstrap樣式測(cè)試頁',msg:'教練檔案',coachname:'勁兒弟弟',mycoach:{name:'陳培昌',age:22,expertin:['散打','泰拳']},jinerdidi:{name:'程勁',starinfo:{age:20,favortie:['品鑒河南燴面','和丁大哥一起廝混'],expertin:[{'stand':['散打','泰拳']},{'ground':['巴西柔術(shù)','MMA']}]},},chrouslist:['我不想對(duì)你再說些什么','現(xiàn)在是氣憤的我','你是被你的虛偽完全淹沒','變成討厭的顏色','......']}} } </script>

• html部分

<div class="container"><h1 class="mt-5"><div v-text="mytitle"></div></h1><p class="lead"><div v-text="coachname"></div><code>padding-top: 60px;</code> on the <code>main &gt; .container</code>.</p><p><input v-model="coachname" type="text" class="form-control col-md-6"><br><button type="button" class="btn btn-success">Bind按鈕</button></p><p>Back to <a href="/docs/4.3/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p> </div>

輸出結(jié)果：

嘗試改變輸入框里的內(nèi)容：

結(jié)果：

• 綁定事件（注意methods和data的層級(jí)關(guān)系）

<script>
export default {
data()
{
return {
pagestyle:'https://v4.bootcss.com/docs/4.3/dist/css/bootstrap.css',
pagecss:'https://v4.bootcss.com/docs/4.3/examples/sticky-footer-navbar/sticky-footer-navbar.css',
mytitle:'v-bind bootstrap樣式測(cè)試頁',
msg:'教練檔案',
coachname:'勁兒弟弟'
}
},
methods: {
getmsg() {
alert(this.msg);
this.$refs.inforec.textContent=this.coachname+"的"+this.msg+"\n";
}
}
}
</script> ?

• html部分

?

?點(diǎn)擊確定后,

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/saintdingspage/p/11414523.html

總結(jié)

以上是生活随笔為你收集整理的双向绑定v-bind的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。