5vue学习_动态绑定属性v-bind

最新推荐文章于 2021-03-05 00:06:39 发布

chencaw

最新推荐文章于 2021-03-05 00:06:39 发布

阅读量183

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/chencaw/article/details/113242783

版权

VUE 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了Vue.js中使用v-bind进行动态属性绑定的方法，包括基本用法、类绑定、按钮事件处理及数组方法调用等高级技巧。

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

1、对属性的动态绑定，如超链接，图像等众多地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <h2>{{message}}</h2>
        <img v-bind:src="imgUrl" alt="">
        <p>  
        <a v-bind:href="URL">百度一下</a>    
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '绑定测试', 
                imgUrl: 'https://www.baidu.com/favicon.ico',
                URL: 'https://www.baidu.com' 
            },
        })
    </script>
</body>

效果如下

2、v-bind的缩写，语法糖

        <img :src="imgUrl" alt="">
        <p>  
        <a :href="URL">百度一下</a>

整个程序可以简化为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <h2>{{message}}</h2>
        <!-- <img v-bind:src="imgUrl" alt="">
        <p>  
        <a v-bind:href="URL">百度一下</a>     -->
<!-- 语法糖，v-bind的缩写为  :  -->
        <img :src="imgUrl" alt="">
        <p>  
        <a :href="URL">百度一下</a>    
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '绑定测试', 
                imgUrl: 'https://www.baidu.com/favicon.ico',
                URL: 'https://www.baidu.com' 
            },
        })
    </script>
</body>

3、对类的绑定！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id ="app">
        <!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>
        <h2 v-bind:class="{类名1:true,类名2:false}">{{message}}</h2> -->
        <!-- boolean为true类自动绑定在上面 -->
        <h2 v-bind:class="{active:isActive,Line:isLine}">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '绑定测试', 
                isActive: true,
                isLine: true
            },
        })
    </script>
</body>

结果交互如下

4、按钮操作例子

点击按钮后，颜色来回变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id ="app">
        <!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>
        <h2 v-bind:class="{类名1:true,类名2:false}">{{message}}</h2> -->
        <!-- boolean为true类自动绑定在上面 -->
        <h2 v-bind:class="{active:isActive,Line:isLine}">{{message}}</h2>
        <button v-on:click="chenbtClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '绑定测试', 
                isActive: true,
                isLine: true
            },
            methods:{
                chenbtClick: function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

5、简化为方法操作，按钮操作例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id ="app">
        <!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>
        <h2 v-bind:class="{类名1:true,类名2:false}">{{message}}</h2> -->
        <!-- boolean为true类自动绑定在上面 -->
        <!-- <h2 v-bind:class="{active:isActive,Line:isLine}">{{message}}</h2> -->
        <h2 :class="getClasses()">{{message}}</h2>
        <button v-on:click="chenbtClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '绑定测试', 
                isActive: true,
                isLine: true
            },
            methods:{
                chenbtClick: function(){
                    this.isActive = !this.isActive;
                },
                getClasses: function(){
                    return {active:this.isActive,Line:this.isLine};
                }
            }
        })
    </script>
</body>

6、基于数组的方法调用类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id ="app">
        <!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>
        <h2 v-bind:class="{类名1:true,类名2:false}">{{message}}</h2> -->
        <!-- boolean为true类自动绑定在上面 -->
        <!-- <h2 v-bind:class="{active:isActive,Line:isLine}">{{message}}</h2> -->
        <h2 class="otherclass" :class="[active1,line1]">{{message}}</h2>
        <h2 class="otherclass" :class="getClasses()">{{message}}</h2>

        <button v-on:click="chenbtClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '绑定测试', 
                isActive: true,
                isLine: true,
                active1: 'aaaaa',
                line1: 'bbbbb'

            },
            methods:{
                chenbtClick: function(){
                    this.isActive = !this.isActive;
                },
                getClasses: function(){
                    //return {active:this.isActive,Line:this.isLine};
                    return [this.active1,this.line1];
                }
            }
        })
    </script>
</body>