Vue 中指令v-bind動(dòng)態(tài)綁定及與v-for結(jié)合使用詳解

更新時(shí)間：2022年09月21日 15:50:52 作者：小余努力搬磚

這篇文章主要為大家介紹了Vue 中指令v-bind動(dòng)態(tài)綁定及與v-for結(jié)合使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言：

在昨天的文章中已經(jīng)基本介紹了，v-bind的基本使用，可以參考學(xué)習(xí)，本文是更加具體的解釋v-bind的使用，和v-for結(jié)合的使用。

一、 v-bind動(dòng)態(tài)綁定class

1. v-bind動(dòng)態(tài)綁定class(對(duì)象語(yǔ)法)

這里舉簡(jiǎn)單例子來(lái)體現(xiàn)綁定效果，設(shè)置一個(gè)按鈕可以控制對(duì)象里面元素的顏色，這時(shí)候?qū)ο缶鸵壎▌?dòng)態(tài)事件，才能實(shí)現(xiàn)變化。

有兩種綁定的方法

一種直接在h5中直接綁定顏色變化，另一種是調(diào)用函數(shù)的方式綁定，需要注意，直接寫就不需要this，但是在調(diào)用函數(shù)里面需要使用this才能實(shí)現(xiàn)。其中還要注意，變色的條件是自己設(shè)置了一個(gè)為false點(diǎn)擊后取反出現(xiàn)，然后再取反，就會(huì)出現(xiàn)變色不變色的樣式。

代碼如下:

  <style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 class="title" :class="{active:isActive}">{{message}}</h3>
    <h3 class="title" :class="getClasses()">{{message}}</h3>
    <button @click="change">點(diǎn)擊變色</button>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"active",
        isActive:false
      },
      methods: {
        change(){
          this.isActive = !this.isActive
        },
        getClasses(){
          return {active:this.isActive}
        }
      },
    })
  </script>

2. v-bind動(dòng)態(tài)綁定class(數(shù)組用法)

class屬性中可以放數(shù)組，會(huì)依次解析成對(duì)應(yīng)的class。

? 加上單引號(hào)的表示字符串
? 不加的會(huì)當(dāng)成變量
? 可以直接使用方法返回?cái)?shù)組對(duì)象

 <div id="app">
    <!-- 加上單引號(hào)當(dāng)成字符串 -->
    <h3 class="title" :class="['active','line']">{{message}}</h3>
    <!-- 不加會(huì)被當(dāng)成變量 -->
    <h3 class="title" :class="[active,line]">{{message}}</h3>
    <h3 class="title" :class="getClasses()">{{message} {{getClasses()[1]}}</h3>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"aaaa",
        line:'bbbb'
      },
      methods: {
        getClasses(){
          return [this.active,this.line]
        }
      },
    })
  </script>

3.v-bind動(dòng)態(tài)綁定style(對(duì)象語(yǔ)法)

<!-- <h3 :style="{key(屬性名):value(屬性值)}">{{message}}</h3> -->
<!-- 加單引號(hào)，當(dāng)成字符串解析 -->
<h3 :style="{fontSize:'50px'}">{{message}}</h3>
<!-- 不加單引號(hào)，變量解析 -->
<h3 :style="{fontSize:fontSize}">{{message}}</h3>
<h3 :style="getClasses()">{{message}}</h3>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data(){
       return{ message:"你好啊",
        fontSize:50+'px'
     }  
    },
      methods: {
        getClasses(){
         return {fontSize:this.fontSize}
        }
      },
    })
  </script>

4.v-bind動(dòng)態(tài)綁定style(數(shù)組語(yǔ)法)

  <div id="app">
    <h3 :style="[baseStyle]">{{message}}</h3>
    <h3 :style="getStyle()">{{message}}</h3>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        baseStyle:{backgroundColor:'red'}
      },
      methods: {
        getStyle(){
          return [this.baseStyle]
        }
      },
    })
  </script>

二、v-bind和v-for的結(jié)合使用

實(shí)現(xiàn)了，點(diǎn)擊字體會(huì)出現(xiàn)變色，前提是需要先通過(guò)v-for把數(shù)組內(nèi)的內(nèi)容全部都遍歷出來(lái)，在通過(guò)綁定事件，來(lái)實(shí)現(xiàn)顏色的切換，其中需要注意，自己設(shè)置了一個(gè)當(dāng)前的索引，通這個(gè)索引來(lái)判斷當(dāng)前的情況，從而發(fā)生顏色的變化，實(shí)現(xiàn)所需的結(jié)果。

<style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li :class="currentIndex==index?'active':''" @click="change(index)" v-for="(item,index) in list">{{index}}--{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    currentIndex:0,
                    list:["小明","小紅","小張","小李"],
                }
            },
            methods:{
                change(index){
                    this.currentIndex=index
                }
            }
        })
    </script>

以上就是Vue 中指令v-bind動(dòng)態(tài)綁定及與v-for結(jié)合使用詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue 指令v-bind結(jié)合v-for的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: