首頁 > web前端 > 前端問答 > vue資料綁定的幾種方式是什麼

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

青灯夜游
發布: 2021-12-27 14:16:15
原創
4144 人瀏覽過

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>{{ 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資料綁定的幾種方式是什麼

【相關推薦:《

vue.js教程》】

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板