Vue2.js学习笔记-05(通过属性绑定添加样式)

最新推荐文章于 2023-01-30 15:00:00 发布

笑笑是一个码农

最新推荐文章于 2023-01-30 15:00:00 发布

阅读量328

点赞数

分类专栏： Vue2 文章标签： vue.js html css style class

本文链接：https://blog.csdn.net/u012430402/article/details/93378369

版权

Vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、回顾

上次学习了v-model对表单元素的双向绑定，无需人为操作dom，无论是修改了页面上的值，还是vue实例中属性的值，都会同步修改另一方的值。今天学习的内容是通过属性绑定为元素添加样式。

二、通过属性绑定添加样式

练习代码如下：

<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>Vue学习-通过属性绑定为元素添加样式</title>
    <style>
        .green{
            color: green;
        }
        .size{
            font-size: 2em;
        }
        .active{
            /* 字符间距 */
            letter-spacing: 1em; 
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 原始添加类样式的方式 -->
        <h4 class="green size">哈哈哈哈</h4>

        <!-- 属性绑定class的数组方式-->
        <h4 :class="['green', 'size', 'active']">啦啦啦啦啦</h4>

        <!-- 数组中可以使用三元表达式,其中flag为vue实例中属性 -->
        <h4 :class="['green', 'size', flag1 ? 'active' : '']">叭叭叭</h4>

        <!-- 数组中可以使用对象 -->
        <h4 :class="['green', 'size', {'active' : flag2}]">啪啦啪啦</h4>

        <!-- 也可以直接使用对象 -->
        <h4 :class="{green: true, size: true, active: flase}">破破破破破</h4>
        

        <!-- 属性绑定style内联样式，如果样式的key中间有‘-’分隔符，需要加单引号 -->
        <h4 :style="{color: 'green','font-size':'2em'}">内联内联</h4>

        <!-- 内敛同样可以使用数组，绑多个样式对象 -->
        <h4 :style="[{color: 'green','font-size':'2em'},{'letter-spacing': '1em'}]">内联内联数组</h4>

    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        //创建vue实例
        var vm1 = new Vue({
            el:"#app",
            data:{      
              flag1: false,
              flag2: true
            }
        });
    </script>
</body>
</html>

笑笑是一个码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.js学习笔记-05(通过属性绑定添加样式)

一、回顾上次学习了v-model对表单元素的双向绑定，无需人为操作dom，无论是修改了页面上的值，还是vue实例中属性的值，都会同步修改另一方的值。今天学习的内容是通过属性绑定为元素添加样式。二、通过属性绑定添加样式练习代码如下：<html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫

专栏目录