技術文章 » vue使用什麼繫結資料

vue使用什麼繫結資料

2022-12-23 14:00:28

vue繫結資料的方法：1、用雙大括號「{{}}」把資料給到頁面；2、使用vue指令，v-bind指令可實現單向資料繫結，v-model指令可實現雙向資料繫結；3、使用「:」，只需在標籤屬性前加「:」進行繫結即可；4、使用「${}」，只需在資料前拼接字串用「${}」。

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

Vue繫結資料的幾種方式

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

<template>

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

1.png

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

2.png

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>
登入後複製

3.png

通過: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>
登入後複製

4.png

【相關推薦：、】

以上就是vue使用什麼繫結資料的詳細內容，更多請關注TW511.COM其它相關文章！