• 通過v-model綁定輸出數據

<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樣式測試頁',msg:'教練檔案',coachname:'勁兒弟弟',mycoach:{name:'陳培昌',age:22,expertin:['散打','泰拳']},jinerdidi:{name:'程勁',starinfo:{age:20,favortie:['品鑒河南燴面','和丁大哥一起廝混'],expertin:[{'stand':['散打','泰拳']},{'ground':['巴西柔術','MMA']}]},},chrouslist:['我不想對你再說些什么','現在是氣憤的我','你是被你的虛偽完全淹沒','變成討厭的顏色','......']}} } </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>

輸出結果：

嘗試改變輸入框里的內容：

結果：

• 綁定事件（注意methods和data的層級關系）

<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樣式測試頁',
msg:'教練檔案',
coachname:'勁兒弟弟'
}
},
methods: {
getmsg() {
alert(this.msg);
this.$refs.inforec.textContent=this.coachname+"的"+this.msg+"\n";
}
}
}
</script> ?

• html部分

?

?點擊確定后,

?

?

轉載于:https://www.cnblogs.com/saintdingspage/p/11414523.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。