v-bind动态绑定（vue）

最新推荐文章于 2024-01-03 16:09:41 发布

林小鹅

最新推荐文章于 2024-01-03 16:09:41 发布

阅读量1.1k

点赞数 1

分类专栏：前呀前端呀文章标签： vue javascript vue.js

本文链接：https://blog.csdn.net/xiaolingshi_/article/details/108856270

版权

前呀前端呀专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-bind动态绑定（vue）

v-bind分为两种（对对象和对数组）

首先介绍下v-bind对象语法

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<script src="../js/vue.js"></script>
<body>
    <div id="app">
       <h2 class="title"v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
       <button v-on:click="btnClick">按钮</button>
    </div>
</body>
<script>
const app =  new Vue({
    el:'#app',
    data:{//定义数据
        message:'你好啊',
        isActive:true,
        isLine:true
    },
    methods: {
        btnClick:function(){
            this.isActive = !this.isActive
        }
    },
})
</script>
</html>

在这里插入图片描述
v-bind绑定class类名通过按钮来控制字体的颜色变化

语法:类名:布尔值

一开始的
设置class="active"存在，即字体颜色为红色，如果
点击按钮则改变isActive的布尔值导致active属性的存在与否

其中的class可以以另外一种方式来写
在这里插入图片描述
第二种是v-bind（数组语法）

使用数组添加元素的class类名

添加变量则不用加字符串，添加类名则添加字符串

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<script src="../js/vue.js"></script>
<body>
    <div id="app">
       <h2 class="title" :class="getClasses()">{{message}}</h2>
    </div>
</body>
<script>
const app =  new Vue({
    el:'#app',
    data:{//定义数据
        message:'你好啊',
        active:'aaa',
        line:'bbb'
    },
    methods: {
        getClasses:function(){
            return [this.active,this.line]
        }
    },
})
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<script src="../js/vue.js"></script>
<body>
    <div id="app">
        <ul>
            <li v-for="m in movies">{{m}}</li>
        </ul>
    </div>
</body>
<script>
const app =  new Vue({
   el:'#app',
    data:{//定义数据
        movies:['海湾','海尔兄弟','火影']
    }
})
</script>
</html>

在这里插入图片描述
v-bind绑定style

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active {
        color: red;
    }
</style>
<script src="../js/vue.js"></script>

<body>
    <div id="app">
        <h2 :style="getStyles()">{{message}}</h2>
    </div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: { //定义数据
            message:'你好呀',
            finalSize:100,
            finalColor:'red'
        }
        ,methods: {
            getStyles:function(){
                return {fontSize:this.finalSize +'px',backgroundColor:this.finalColor}
            }
        },
    })
</script>

</html>

在这里插入图片描述
最后结果显示背景颜色和字体大小