vue学习（五）【vue样式绑定：对象或数组】

最新推荐文章于 2024-06-03 17:48:06 发布

小卜妞~

最新推荐文章于 2024-06-03 17:48:06 发布

阅读量3.2k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_33866063/article/details/88720677

版权

点击改变文字颜色

通过class对象绑定和class数组绑定，可以实现vue的样式绑定。在页面中检查dom元素，看点击测试文本时，dom中是否会出现class名，然后在style中定义的一些样式就可以动态的作用到dom上了。

第一种：class的对象绑定

<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
<div id="root">
    <!--class对象，注意以下的写法-->
    <div @click="handleDivClick"
         :class="{activated: isActivited}"
    >
        Hello World
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            isActivited: false/*默认置false*/
        },
        methods: {
            h

最低0.47元/天解锁文章

小卜妞~

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue学习（五）【vue样式绑定：对象或数组】

点击改变文字颜色通过class对象绑定和class数组绑定，可以实现vue的样式绑定。在页面中检查dom元素，看点击测试文本时，dom中是否会出现class名，然后在style中定义的一些样式就可以动态的作用到dom上了。第一种：class的对象绑定<!DOCTYPE html><html lang="en">...
复制链接

扫一扫

专栏目录