Vue v-bind的动态绑定02入门基础

最新推荐文章于 2025-11-01 10:51:17 发布

原创最新推荐文章于 2025-11-01 10:51:17 发布 · 332 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了Vue.js中v-bind的使用方法，包括基本的属性绑定、动态绑定class和style，以及与v-for结合的应用。通过示例展示了如何在模板中动态地设置元素的src、class和style，实现条件样式和响应式更新。

01 bind的基本使用

绑定

某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{{imgURL}}" alt="">，这也是错误的。

  <div id="app">
        <span :title="msg">你好呀</span>
    </div>


    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: `页面加载于${new Date().toLocaleString()}`
                }
            },
            methods: {

            },
            computed: {

            }
        })
    </script>

02 v-bind动态绑定class(对象语法)

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"（这里我用a代替，把a：里面的属性值写在getactive（）里面），当Dom元素有此class时候，变红<style>.a{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

 <!-- 动态绑定class -->
    <div id="app">
        <h1 :class="getactive()">你好</h1>
        <button type="button" @click="bianse()">bianse</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    b: true
                }
            },
            methods: {
                getactive() {
                    return {
                        a: this.b
                    }
                },
                bianse() {
                    this.b = !this.b
                }

            },
            computed: {

            }
        })
    </script>

03 v-bind动态绑定class(数组用法)

class属性中可以放数组，会依次解析成对应的class。

加上单引号的表示字符串
不加的会当成变量
可以直接使用方法返回数组对象

    <div id="app">

        <h2 class="title" :class="['a','b']">{{msg}}</h2>
        <h2 class="title" :class="[a,b]">{{msg}}</h2>
        <h2 class="title" :class="getClass()">{{msg}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: 'nihao',
                    a: 'aaa',
                    b: 'bbb'
                }
            },
            methods: {
                getClass() {
                    return [this.a, this.b]
                }

            },
            computed: {

            }
        })
    </script>

04 v-for和v-bind结合

使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成粉色。

（01）

 <div id="app">
        <ul>
            <!-- 对象的写法 -->
            <li v-for="(item,index) in mov" :key="index" :class="{a:index==paita}" @click="bianse(index)">{{index}}--{{item}}</li>
            <!-- 三元表达式的写法 -->
            <p>

            </p>
            <li v-for="(item,index) in mov" :key="index" :class="paita==index? 'a':''" @click="bianse(index)">{{index}}--{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    paita: 0,
                    mov: ['海王', '海贼王', '火影忍者', '复联']
                }
            },
            methods: {
                bianse(c) { //c是形参
                    this.paita = c
                }
            },
            computed: {

            }
        })
    </script>

（02） v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变粉。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作业(v-for和v-bind的结合)</title>
  <style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">

    <ul>
      <li v-for="(item, index) in movies" :key="index" :class="{active:index===currentIndex}" @click="changeColor(index)" >{{index+"---"+item}}</li>
    </ul>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        currentIndex:0,
        movies:["海王","海贼王","火影忍者","复仇者联盟"]
      },
      methods: {
        changeColor(index){
          this.currentIndex = index
        }
      },
    })
  </script>
</body>
</html>

05v-bind动态绑定style对象语法

<!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
<!-- 加单引号，当成字符串解析 -->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<!-- 不加单引号，变量解析 -->
<h2 :style="{fontSize:fontSize}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>

   <div id="app">
        <h2 :style="{fontSize:'50px'}">nihoa </h2>
        <h2 :style=" getstyle()">nihoa </h2>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    fontsize: '50px'
                }
            },
            methods: {
                getstyle() {
                    return {
                        fontSize: this.fontsize
                    }
                }
            },
            computed: {

            }
        })
    </script>

06v-bind动态绑定style(数组语法)

类似绑定class，绑定style也是一样的。

（01）

  <div id="app">
        <h2 :style="getstyle">大家好 </h2>

    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    getstyle: {
                        fontSize: '50px',
                        color: 'pink'
                    }
                }
            },
            methods: {

            },
            computed: {

            }
        })
    </script>

（02）

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