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

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

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

前言：

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

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

1. v-bind動態(tài)綁定class(對象語法)

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

有兩種綁定的方法

一種直接在h5中直接綁定顏色變化，另一種是調(diào)用函數(shù)的方式綁定，需要注意，直接寫就不需要this，但是在調(diào)用函數(shù)里面需要使用this才能實現(xiàn)。其中還要注意，變色的條件是自己設(shè)置了一個為false點擊后取反出現(xiàn)，然后再取反，就會出現(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">點擊變色</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動態(tài)綁定class(數(shù)組用法)

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

? 加上單引號的表示字符串
? 不加的會當成變量
? 可以直接使用方法返回數(shù)組對象

 <div id="app">
    <!-- 加上單引號當成字符串 -->
    <h3 class="title" :class="['active','line']">{{message}}</h3>
    <!-- 不加會被當成變量 -->
    <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動態(tài)綁定style(對象語法)

<!-- <h3 :style="{key(屬性名):value(屬性值)}">{{message}}</h3> -->
<!-- 加單引號，當成字符串解析 -->
<h3 :style="{fontSize:'50px'}">{{message}}</h3>
<!-- 不加單引號，變量解析 -->
<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動態(tài)綁定style(數(shù)組語法)

  <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é)合使用

實現(xiàn)了，點擊字體會出現(xiàn)變色，前提是需要先通過v-for把數(shù)組內(nèi)的內(nèi)容全部都遍歷出來，在通過綁定事件，來實現(xiàn)顏色的切換，其中需要注意，自己設(shè)置了一個當前的索引，通這個索引來判斷當前的情況，從而發(fā)生顏色的變化，實現(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動態(tài)綁定及與v-for結(jié)合使用詳解的詳細內(nèi)容，更多關(guān)于Vue 指令v-bind結(jié)合v-for的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: