站長(zhǎng)資訊網(wǎng)
vue綁定數(shù)據(jù)的方法：1、用雙大括號(hào)“{{}}”把數(shù)據(jù)給到頁(yè)面；2、使用vue指令，v-bind指令可實(shí)現(xiàn)單向數(shù)據(jù)綁定，v-model指令可實(shí)現(xiàn)雙向數(shù)據(jù)綁定；3、使用“:”，只需在標(biāo)簽屬性前加“:”進(jìn)行綁定即可；4、使用“${}”，只需在數(shù)據(jù)前拼接字符串用“${}”。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
一、用雙大括號(hào) ‘{{}}’ 把數(shù)據(jù)給到頁(yè)面
<template> <div class="mainBody"> <h3>{{ msg }}</h3> </div></template><script>export default { data(){ return{ msg:'月落烏啼霜滿(mǎn)天', }}}</script>
<template> <div class="mainBody"> <Input v-model="msg"/> </div></template><script>export default { data(){ return{ msg:'月落烏啼霜滿(mǎn)天' }}}</script>
這邊使用的是 v-model 將輸入框的值與msg綁定 ，還可以是v-text v-html v-bind等
1.單向數(shù)據(jù)綁定(v-bind):數(shù)據(jù)只能從data流回頁(yè)面（單向傳遞）
2.雙向數(shù)據(jù)綁定(v-model)：數(shù)據(jù)不僅可以從data流向頁(yè)面，還可以從頁(yè)面流向data
（1）雙向數(shù)據(jù)綁定一般都應(yīng)用在表單類(lèi)元素上（如：input select checkbox等）
（2）v-model:value 可以簡(jiǎn)寫(xiě)為 v-model 因?yàn)関-model默認(rèn)收集的就是value值
<template> <div class="mainBody"> <CellGroup> <Cell :title="msg"/> </CellGroup> </div></template><script>export default { data(){ return{ msg:'月落烏啼霜滿(mǎn)天', }}}</script>
通過(guò):title 將msg的值綁定到cell單元格的title，如果title屬性前面忘記加‘ ：’的話(huà)，頁(yè)面展示就會(huì)變成這樣：
給到title的值就不是data（）中的變量 msg 而是字符串“msg”了
<template><!-- 有時(shí)我們需要給要綁定的值拼接字符串，比如需要控制樣式，拼接字符串時(shí)，那我們就需要這樣寫(xiě)`${}`， --> <div class="mainBody"> <CellGroup> <Cell :title="msg"/> <!-- 將‘江楓漁火對(duì)愁眠’單元格 的背景色綁定到 color:'aqua' --> <Cell title='江楓漁火對(duì)愁眠' :style="`background-color: ${color}`"/> <!-- 將‘江楓漁火對(duì)愁眠’拼接在msg：'月落烏啼霜滿(mǎn)天'后--> <Cell :title="`${msg}，江楓漁火對(duì)愁眠`" /> </CellGroup> </div></template><script>export default { data(){ return{ msg:'月落烏啼霜滿(mǎn)天', color:'aqua' }}}</script>
【
