Vue学习04_动态绑定class属性

最新推荐文章于 2024-07-06 21:38:14 发布

旧梦半岛

最新推荐文章于 2024-07-06 21:38:14 发布

阅读量649

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_48459574/article/details/108808564

版权

Vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

绑定属性

v-bind：动态绑定属性，在需要动态绑定的属性值面前加上v-bind，如需要动态绑定src属性，就在他面前台南佳src属性：
示例代码：

    <div id="app">
        <img v-bind:src="imgurl">
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgurl : 'https://www.runoob.com/wp-content/uploads/2017/01/vue.png'
            },
            methods: {}
        });
    </script>

运行结果：
在这里插入图片描述
v-bind的语法糖：：
示例代码：

    <div id="app">
        <img v-bind:src="imgurl">
        <img :src="imgurl">
    </div>

运行结果：
在这里插入图片描述
2. v-bind实现点击按钮切换字体颜色：

<!DOCTYPE html>
<html lang="zh-CN">

<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>Vue练习</title>
    <script src="../js/vue.js"></script>
    <style>
        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <p :class="{active:isActive,line:isLine}">{{message}}</p>
        <button @click="isButton">按钮</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World！',
                isActive: true,
                isLine: true
            },
            methods: {
                isButton: function () {
                    this.isActive = !this.isActive
                }
            }
        });
    </script>
</body>

</html>

运行截图：点击按钮时字体颜色发生改变
在这里插入图片描述

3.v-bind也可以在设置固定属性的时候绑定动态属性，运行时会自动将两个属性的值拼接在一起：
对象语法：
示例代码：

    <p class="title" :class="{active:isActive,line:isLine}">{{message}}</p>

运行结果：字体变得更粗，即便定义了固定的属性，也不影响动态属性的绑定：
在这里插入图片描述
class的属性值自动拼接：

但是如此编码有一个问题，便是动态绑定的属性值太长，代码不美观，因此可以将动态绑定的属性值抽出来，写成一个函数，直接调用：
示例代码：

    <div id="app">
        <p class="title" :class="getClass()">{{message}}</p>
        <button @click="isButton()">按钮</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World！',
                isActive: true,
                isLine: true
            },
            methods: {
                isButton: function () {
                    this.isActive = !this.isActive
                },
                getClass: function () {
                    return { active: this.isActive, line: this.isLine }
                }
            }
        });
    </script>

运行结果与上面代码一致
数组语法
这样写就等价于把class属性直接写死，一般不建议使用
示例代码：

    <div id="app">
        <p :class="clas">{{message}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : 'Hello World!',
                clas : ['active','line']
            },
            methods: {}
        });
    </script>

运行结果：
在这里插入图片描述
当然，和对象语法一样，也可以使用方法直接调用：这样代码看起来更加的简洁美观：
示例代码

    <div id="app">
        <p :class="getClass()">{{message}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World!',
                isActive: 'active',
                isLine: 'line'
            },
            methods: {
                getClass: function () {
                    return [this.isActive, this.isLine]
                }
            }
        });
    </script>

运行结果与上面的一样。
4. 使用v-bind和v-on以及v-for实现点击列表中的某一项，某一项变红：
示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<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>Vue作业练习</title>
    <script src="../js/vue.js"></script>
    <style>
        .active {
            color: red;
        }

        .line {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li @click="changeColor(index)" :class="{active:index==isActive}" v-for="(item,index) in books">
                {{index}}-{{item}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: ['三国演义', '水浒传', '西游记', '红楼梦'],
                isActive: false,
            },
            methods: {
                changeColor: function (index) {
                    this.isActive = index;
                }
            }
        });
    </script>
</body>

</html>