雙向綁定v-bind

• 通過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部分

 

 點擊確定后,