vue資料綁定的幾種方式是什麼

Vue資料綁定的方式：1、用雙大括號「{{}}」把資料給到頁面；2、使用「v-model」、「v-text」、「v-html 」、「v-bind」等指令；3、標籤屬性前加「:」綁定；4、資料前拼接字串用「${}」。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

Vue綁定資料的幾種方式

#一、用雙大括號'{<strong><span style="font-size: 16px;">#{}}</span></strong>' 把資料給到頁面##

<template>

  <div class="mainBody">
      <h3>{{ msg }}</h3>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

二、使用vue指令

<template>

  <div class="mainBody">
       <Input v-model="msg"/>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;
     }
}
}
</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:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

透過:title 將msg的值綁定到cell單元格的title，如果title屬性前面忘記加'

：'的話，頁面展示就會變成這樣：
給到title的值就不是data（）中的變數msg 而是字串「msg」了

四、資料前拼接字串用`${}`

<template>
<!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， -->
  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
       <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&#39;aqua&#39; -->
      <Cell title=&#39;江枫渔火对愁眠&#39; :style="`background-color: ${color}`"/>
       <!-- 将‘江枫渔火对愁眠’拼接在msg：&#39;月落乌啼霜满天&#39;后-->
      <Cell :title="`${msg}，江枫渔火对愁眠`" />
    </CellGroup>

  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
       color:&#39;aqua&#39;
     }
}
}
</script>

【相關推薦：《

vue.js教程》】

以上是vue資料綁定的幾種方式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！