站長資訊網(wǎng)
vue綁定數(shù)據(jù)的方法：1、用雙大括號“{{}}”把數(shù)據(jù)給到頁面；2、使用vue指令，v-bind指令可實現(xiàn)單向數(shù)據(jù)綁定，v-model指令可實現(xiàn)雙向數(shù)據(jù)綁定；3、使用“:”，只需在標簽屬性前加“:”進行綁定即可；4、使用“${}”，只需在數(shù)據(jù)前拼接字符串用“${}”。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
一、用雙大括號 ‘{{}}’ 把數(shù)據(jù)給到頁面
<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.單向數(shù)據(jù)綁定(v-bind):數(shù)據(jù)只能從data流回頁面（單向傳遞）
2.雙向數(shù)據(jù)綁定(v-model)：數(shù)據(jù)不僅可以從data流向頁面，還可以從頁面流向data
（1）雙向數(shù)據(jù)綁定一般都應用在表單類元素上（如：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>
登錄后復制
【
