站長資訊網
vue綁定數據的方法：1、用雙大括號“{{}}”把數據給到頁面；2、使用vue指令，v-bind指令可實現單向數據綁定，v-model指令可實現雙向數據綁定；3、使用“:”，只需在標簽屬性前加“:”進行綁定即可；4、使用“${}”，只需在數據前拼接字符串用“${}”。
本教程操作環境：windows7系統、vue3版，DELL G3電腦。
<template> <div class="mainBody"> <h3>{{ msg }}</h3> </div></template><script>export default { data(){ return{ msg:'月落烏啼霜滿天', }}}</script>
登錄后復制
<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等
1.單向數據綁定(v-bind):數據只能從data流回頁面（單向傳遞）
2.雙向數據綁定(v-model)：數據不僅可以從data流向頁面，還可以從頁面流向data
（1）雙向數據綁定一般都應用在表單類元素上（如：input select checkbox等）
（2）v-model:value 可以簡寫為 v-model 因為v-model默認收集的就是value值
<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”了
<template><!-- 有時我們需要給要綁定的值拼接字符串，比如需要控制樣式，拼接字符串時，那我們就需要這樣寫`${}`， --> <div class="mainBody"> <CellGroup> <Cell :title="msg"/> <!-- 將‘江楓漁火對愁眠’單元格 的背景色綁定到 color:'aqua' --> <Cell title='江楓漁火對愁眠' :style="`background-color: ${color}`"/> <!-- 將‘江楓漁火對愁眠’拼接在msg：'月落烏啼霜滿天'后--> <Cell :title="`${msg}，江楓漁火對愁眠`" /> </CellGroup> </div></template><script>export default { data(){ return{ msg:'月落烏啼霜滿天', color:'aqua' }}}</script>
登錄后復制
【
