vue如何綁定數據

這篇文章主要介紹了vue如何綁定數據的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue如何綁定數據文章都會有所收獲，下面我們一起來看看吧。

vue綁定數據的方法：1、用雙大括號“{{}}”把數據給到頁面；2、使用vue指令，v-bind指令可實現單向數據綁定，v-model指令可實現雙向數據綁定；3、使用“:”，只需在標簽屬性前加“:”進行綁定即可；4、使用“${}”，只需在數據前拼接字符串用“${}”。

一、用雙大括號 ‘{{}}’ 把數據給到頁面

<template>

  <div class="mainBody">
      <h4>{{ msg }}</h4>
  </div></template><script>export default {
   data(){
     return{
       msg:'月落烏啼霜滿天',
     }}}</script>

二、使用vue指令

<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.單向數據綁定(v-bind):數據只能從data流回頁面（單向傳遞）

2.雙向數據綁定(v-model)：數據不僅可以從data流向頁面，還可以從頁面流向data

（1）雙向數據綁定一般都應用在表單類元素上（如：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>

關于“vue如何綁定數據”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue如何綁定數據”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。