vue使用什麼綁定數據-前端問答-PHP中文網

vue使用什麼綁定數據

青灯夜游

發布： 2022-12-23 12:12:01

原創

5367 人瀏覽過

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

vue使用什麼綁定數據

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

Vue綁定資料的幾種方式

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

<template>

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

登入後複製

vue使用什麼綁定數據

二、使用vue指令

<template>

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

登入後複製

這邊使用的是v-model 將輸入框的值與msg綁定，還可以是v-text v-html v-bind等

vue使用什麼綁定數據

1.單向資料綁定(v-bind):資料只能從data流回頁面（單向傳遞）

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

（1）雙向資料綁定一般都應用在表單類別元素上（如：input select checkbox等）

#（ 2）v-model:value 可以簡寫為v-model 因為v-model預設收集的是value值

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

<template>

  <div>
    <cellgroup>
      <cell></cell>
    </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>
    <cellgroup>
      <cell></cell>
       <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&#39;aqua&#39; -->
      <cell></cell>
       <!-- 将‘江枫渔火对愁眠’拼接在msg：&#39;月落乌啼霜满天&#39;后-->
      <cell></cell>
    </cellgroup>

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

登入後複製

vue使用什麼綁定數據