vue數(shù)據(jù)綁定的方式：1、用雙大括號“{{}}”把數(shù)據(jù)給到頁面；2、使用“v-model”、“v-text”、“v-html”、“v-bind”等指令；3、標簽屬性前加“:”綁定；4、數(shù)據(jù)前拼接字符串用“${}”。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，dell g3電腦。
vue綁定數(shù)據(jù)的幾種方式
一、用雙大括號 ‘{{}}’ 把數(shù)據(jù)給到頁面
<template> <div class=\”mainbody\”> <h3>{{ msg }}</h3> </div></template><script>export default { data(){ return{ msg:\’月落烏啼霜滿天\’, }}}</script>
二、使用vue指令
<template> <div class=\”mainbody\”> <input v-model=\”msg\”/> </div></template><script>export default { data(){ return{ msg:\’月落烏啼霜滿天\’ }}}</script>
這邊使用的是 v-model 將輸入框的值與msg綁定 ，還可以是v-text v-html v-bind等
三、標簽屬性前加 ‘ ：’ 綁定
<template> <div class=\”mainbody\”> <cellgroup> <cell :title=\”msg\”/> </cellgroup> </div></template><script>export default { data(){ return{ msg:\’月落烏啼霜滿天\’, }}}</script>
通過:title 將msg的值綁定到cell單元格的title，如果title屬性前面忘記加‘：’的話，頁面展示就會變成這樣： 給到title的值就不是data（）中的變量 msg 而是字符串“msg”了
四、數(shù)據(jù)前拼接字符串用`${}`
<template><!– 有時我們需要給要綁定的值拼接字符串，比如需要控制樣式，拼接字符串時，那我們就需要這樣寫`${}`， –> <div class=\”mainbody\”> <cellgroup> <cell :title=\”msg\”/> <!– 將‘江楓漁火對愁眠’單元格 的背景色綁定到 color:\’aqua\’ –> <cell title=\’江楓漁火對愁眠\’ :/> <!– 將‘江楓漁火對愁眠’拼接在msg：\’月落烏啼霜滿天\’后–> <cell :title=\”`${msg}，江楓漁火對愁眠`\” /> </cellgroup> </div></template><script>export default { data(){ return{ msg:\’月落烏啼霜滿天\’, color:\’aqua\’ }}}</script>