vue中v-bind的使用

最新推荐文章于 2025-06-24 00:27:45 发布

原创最新推荐文章于 2025-06-24 00:27:45 发布 · 544 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端入门专栏收录该内容

26 篇文章

订阅专栏

本文介绍了Vue.js中如何动态绑定数据到元素属性，如img的src和a的href，以及如何使用v-bind（语法糖为冒号）进行动态绑定。同时，展示了动态绑定class和style属性的方法，包括根据条件切换class和动态设置样式。通过实例代码，详细解释了如何在列表中实现点击高亮效果，并演示了动态改变元素样式的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片上的数据不是写死的，向服务器发送一个请求，服务器返回一个接收数据，包含了很多的url。需要把url动态的放到页面上显示。

除了内容可以动态绑定之外，还想要一些属性也可以动态绑定，像图片、链接等。可以使用v-bind来绑定img中的src；绑定a中的href。把服务器请求来的数据，放到vue框架的data中，再在div中属性绑定。

将图片写死，显示

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <h2>{{message}}</h2>
        <img src="https://cn.vuejs.org/images/logo.svg" width="250" height="250">
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message :'你好啊啊'
           },
           methods:{}
        })
    </script>
</body>

</html>

但在实际中，src中的链接，是需要从服务器请求过来的，则需要先把服务器请求来的数据存入到data里，再动态的绑定到div中。

在哪个属性前面绑定值，就在其前面绑定v-bind。此时src中的内容就不是一个字符串了，而是一个变量。

更改后的代码为

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app" >
        <h2>{{message}}</h2>
        <img src="https://cn.vuejs.org/images/logo.svg" width="250" height="250"><br>
        <img v-bind:src="imgURL" width="250" height="250">
        <a v-bind:href="aURL">我的博客</a>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message :'你好啊啊',
               imgURL : 'https://cn.vuejs.org/images/logo.svg',
               aURL : 'https://blog.youkuaiyun.com/qq_44870115?spm=1001.2101.3001.5343'
           },
           methods:{}
        })
    </script>
</body>

</html>

v-bind语法糖

直接写一个冒号就可以

 <img :src="imgURL" width="250" height="250">
        <a :href="aURL">我的博客</a>

v-bind动态绑定class属性

也可以给动态的给class绑定对象{key1：value1，key2：value2}

值可以为boolean类型，当boolean为True时，该类会被添加到标签中，否则不添加到标签上。

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <div id="app">
        <h2 :class={active:true,line:false}>{{message}}</h2>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message :'你好啊啊啊',
               active : 'active',
              
           },
           methods:{}
        })
    </script>
</body>

</html>

案例：有一个按钮，按一次为红色，再按一次为黑色。

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <div id="app">
        <h2 :class={active:isactive,line:isline}>{{message}}</h2>
        <button v-on:click="btnclick">按钮</button>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message :'你好啊啊啊',
               isactive :true,
               isline :false
              
           },
           methods:{
               btnclick:function(){
                   this.isactive= !this.isactive
               }
           }
        })
    </script>
</body>

</html>

首先，在div模块，active为true，所以会加到class中，另一个为false，不会加到class中。在另一个button按钮，v-on为监听指令，监听click点击操作。监听到了就跳转到vue中，执行function。

效果图为

点击一次后变化

v-bind综合案例

显示一个列表，首先第一个设置为红色，后点击哪一个，哪一个就为红色。

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-on:click='btnclick(m)' 
                v-for='(item,m) in fruits' :class="{active:currentindex === m}">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               currentindex: 0,
               isactive :true,
               isline :false,
               fruits: ['apple','orange','banana','grape']

              
           },
           methods:{
               btnclick:function(m){
                  
                this.currentindex = m
               
               }
           }
        })
    </script>
</body>

</html>

v-bind绑定样式style

动态样式用于组件化中，style后也是跟对象{key1：value1，key2：value2}

此时的key1为属性名，value为属性值。

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <div id="app">
        <h2 :style="{color:'red',fontSize:'50px'}">{{message}}</h2>
        <button v-on:click="btnclick">按钮</button>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message :'你好啊啊啊',
               isactive :true,
               isline :false
              
           },
           methods:{
               btnclick:function(){
                   this.isactive= !this.isactive
               }
           }
        })
    </script>
</body>

</html>

但此时也没有在动态改变。则采用以下代码即可

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <div id="app">
        <h2 :style="{color:'red',fontSize:finalsize}">{{message}}</h2>
        <button v-on:click="btnclick">按钮</button>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message :'你好啊啊啊',
               isactive :true,
               isline :false,
               finalsize : '100px',
              
           },
           methods:{
               btnclick:function(){
                   this.isactive= !this.isactive
               }
           }
        })
    </script>
</body>

</html>

其中，也可以使用函数的形式来实现。

<!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>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <div id="app">
        <h2 :style="{color:'red',fontSize:finalsize}">{{message}}</h2>
        <h2 :style="getstyles()">{{message}}</h2>
        <button v-on:click="btnclick">按钮</button>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message :'你好啊啊啊',
               isactive :true,
               isline :false,
               finalsize : '100px',
               finalcolor: 'red'
              
           },
           methods:{
               btnclick:function(){
                   this.isactive= !this.isactive
               },
               getstyles:function(){
                   return {color:this.finalcolor,fontSize:this.finalsize}
               }
           }
        })
    </script>
</body>

</html>