VUE Class列表样式数绑定案例

VUE Class列表样式数绑定案例

Class 与 Style 绑定 v-bind

通过class列表和style指定样式是数据绑定的一个常见需求，他都是元素属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象 或 数组。

语法格式

class 的表达式可以为：

 v-bind:class = '表达式'   或者  :class = '表达式'

 字符串 :class = "activeClass"
 对象   :class = "{ active : isActive , error : hasError }"
 数组   :class = "[ 'active' , 'error' ]"  注意加上单引号，不然获取不到data中的值

style 的表达式一般为对象

:style = "{ color : activeColor , fontSize : fontSize + 'px'  }"
注意，对象中的value值 activeColor 和 fontSize 是data的属性。

案例

class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-Class与Style绑定</title>
    <style>
        .active {
            color: green;
        }
        .delete {
            background: red;
        }
        .error {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>Class绑定 v-bind:class 或者 :class</h3>
        <p class="active">原始的绑定方式：class="active"</p>
        <p v-bind:class="activeClass">v-bind:class="activeClass" 字符串表达式</p>
        <!-- key值是样式名称，value是data中绑定的属性，比如下面，当isDelete为true的时候，delete样式就会被渲染 -->
        <p :class="{delete:isDelete, error:isError}">对象表达式</p>
        <!-- 数组中填写的直接是样式名称，单引号必须写 -->
        <p :class="['active','error']">数组表达式</p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                isDelete: true,
                isError:true
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

style

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-Class与Style绑定</title>
    <style>
        .active {
            color: green;
        }

        .delete {
            background: red;
        }

        .error {
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>Class绑定 v-bind:class 或者 :class</h3>
        <p class="active">原始的绑定方式：class="active"</p>
        <p v-bind:class="activeClass">v-bind:class="activeClass" 字符串表达式</p>
        <!-- key值是样式名称，value是data中绑定的属性，比如下面，当isDelete为true的时候，delete样式就会被渲染 -->
        <p :class="{delete:isDelete, error:isError}">对象表达式</p>
        <!-- 数组中填写的直接是样式名称，单引号必须写 -->
        <p :class="['active','error']">数组表达式</p>

        <h3>Style绑定 v-bind:style 或者 :style</h3>
        <!-- 注意，在style绑定的时候，值是css属性值，全部改为驼峰命名，不然报错 -->
        <p :style="{color:activeColor,fontSize:fontSize + 'px'}">Style样式绑定</p>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                isDelete: true,
                isError: true,
                activeColor: "blue",
                fontSize: 20
            }
        })
    </script>

</body>

</html>

在这里插入图片描述

源码位置：https://gitee.com/wjw1014/vue_learning_course

posted @   叫我+V  阅读(405)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2018-07-27 Arduino使用HC05蓝牙模块与手机连接
点击右上角即可分享
微信分享提示