vue資料綁定的幾種方式是什麼-前端問答-PHP中文網

首頁

web前端

前端問答

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

青灯夜游

Dec 27, 2021 pm 02:16 PM

vue資料綁定

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

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

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

Vue綁定資料的幾種方式

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

<template>

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

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

二、使用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等

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

#三、標籤屬性前加' ：' 綁定

<template>

  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
    </CellGroup>

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

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

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

：'的話，頁面展示就會變成這樣：
vue資料綁定的幾種方式是什麼給到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資料綁定的幾種方式是什麼