vue如何綁定數(shù)據(jù)

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

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

一、用雙大括號 ‘{{}}’ 把數(shù)據(jù)給到頁面

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

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

（1）雙向數(shù)據(jù)綁定一般都應(yīng)用在表單類元素上（如：input select checkbox等）

（2）v-model:value 可以簡寫為 v-model 因為v-model默認(rèn)收集的就是value值

三、標(biāo)簽屬性前加 ‘ ：’ 綁定

<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”了

四、數(shù)據(jù)前拼接字符串用`${}`

<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>

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