vue学习笔记day05 class和style的绑定

最新推荐文章于 2023-02-15 17:03:34 发布
最新推荐文章于 2023-02-15 17:03:34 发布
阅读量162 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39209728/article/details/104541140
版权 
一 vue的class 和style的绑定
    1.class绑定
    :class = "data数据中的值"
    对象写法
    :class = "{bg:true}" 显示属性  false 不显示
    :class = "{bg:true,fz:true}"
    数组写法
    :class="[bg,fz]" ==>取data中数据中的值

    2.style绑定
     对象写法
     :style="{background:bg,color:cl}" ==》bg cl都是data中的数据
     :style="styleObject" ==>styleObject是data中的数据对象
     数组写法
     :style="[bg,cl]" bg cl都是data中的数据对象

例子1

<!DOCTYPE html>
<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>Document</title>
</head>
<style>
    .bg {
        background-color: aqua;
    }
</style>

<body>
    <div id="app">
        <!-- <h1 class="bg">这是一个标记</h1> -->
        <h1 :class="aaaa">这是一个标记</h1>
        <h1 :class="{bg:isActive}">这是一个标记</h1>
        <h1 :class="{bg:true}">这是一个标记</h1>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                aaaa: "bg",
                isActive: false
            }

        })
    </script>
</body>

</html>

例子2

<!DOCTYPE html>
<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>Document</title>
</head>
<style>
    .bg {
        background-color: aqua;
    }
</style>

<body>
    <div id="app">
        <h1 :class="{bg:isActive}">这是一个标题</h1>
        <button @click="show">切换class</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isActive: false
            },
            methods: {
                show: function() {
                    if (this.isActive) {
                        this.isActive = false
                    } else {
                        this.isActive = true
                    }
                }
            }

        })
    </script>
</body>

</html>

例子3

<!DOCTYPE html>
<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>Document</title>
</head>
<style>
    .bg {
        background-color: aqua;
    }
    
    .fz {
        font-size: 16px
    }
</style>

<body>
    <div id="app">
        <!-- <h1 class="bg fz">这是一个标题</h1> -->
        <!-- <h1 :class="{bg:true, fz:fasle}">这是一个标题</h1> -->
        <!-- class对象的写法 -->
        <h1 :class="{bg:bg, fz:fz}">这是一个标题</h1>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                bg: true,
                fz: true
            },


        })
    </script>
</body>

</html>

例子4

<!DOCTYPE html>
<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>Document</title>
</head>
<style>
    .bg {
        background-color: aqua;
    }
    
    .fz {
        font-size: 16px
    }
</style>

<body>
    <div id="app">
        <!-- class数组的写法 -->
        <h1 :class="[bg, fz]">这是一个标题</h1>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                bg: "bg",
                fz: "fz"
            },


        })
    </script>
</body>

</html>

例子5

<!DOCTYPE html>
<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>Document</title>
</head>
<style>
    .bg {
        background-color: aqua;
    }
    
    .fz {
        font-size: 16px
    }
</style>

<body>
    <div id="app">
        <!-- style对象的写法 -->
        <!-- <h1 :style="{color:a,fontSize:b}">这是一个标题</h1> -->
        <h1 :style="styleObjcet">这是一个标题</h1>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                a: "red",
                b: "16px",
                styleObjcet: {
                    color: "blue",
                    fontSize: "16px"
                }
            },


        })
    </script>
</body>

</html>

例子6

<!DOCTYPE html>
<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>Document</title>
</head>
<style>
    .bg {
        background-color: aqua;
    }
    
    .fz {
        font-size: 16px
    }
</style>

<body>
    <div id="app">
        <!-- style数组的写法 -->
        <h1 :style="[bg]">这是一个标题</h1>
        <h1 :style="[bg,cl]">这是一个标题</h1>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                bg: {
                    background: "red"
                },
                cl: {
                    color: "#fff"
                }
            },


        })
    </script>
</body>

</html>

 

桑丘紫言
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js学习笔记之绑定style样式和class列表
10-21
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。这篇文章主要介绍了vue.js绑定style和class的相关资料,需要的朋友可以参考下
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的 DOM 将与数据保持同步，每当数据有改动，...
vue 动态绑定class样式
zmy967131的博客
11-28 352
vue 动态绑定class样式
ECMAScript 6 入门教程—Class 的基本语法
web前端开发
10-23 291
作者 | 阮一峰1、简介类的由来JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) { this.x = x...
Vue中的:class的使用
zhq_zvik的博客
01-29 5万+
一个样式 :class="{makeColor:username!=''}" 多个样式（三元） :class="[email!=''?'makeColor':'',result.email===false?'makeColorRed':'']"
vue class的绑定
不靠谱的作曲家
12-30 1920
1.对象的绑定 基本用法 :class="{ 'active': isActive }" 判断是否绑定 :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 2.绑定并判断多个 第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放...
（14）:class用法
w_t_y_y的博客
05-18 2万+
比如编辑页面和查看页面，内容都是一样的，这时候可以设置一个状态来区分，通过这个状态变量来给编辑处加上class，通过css来控制前端的权限，而不用写两个页面；再比如审核页面，需要查看哪些内容被修改过，修改过而未审核的标红，也可以设置统一的css。 ...
学习vue.js中class与style绑定
10-20
主要和大家一起学习vue.js中class与style绑定操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
:class的使用及通过:class实现标签切换状态改变
米拉
06-25 4523
做一个点击标签切换的功能，效果如下： JS： 当然也可以酱紫写： JS： 二、点击标签加载相应标签的内容： HTML： CSS： JS： 三、三状态切换： 一般用于可选/不可选/选中三种情况: Css: JS: 四、更多状态结合： HTML： CSS： JS： 附：:class的使用(官方文档) 1、:class="变量名"，一般是直接绑定一个类名2、:class = "{ 类名:布尔值 }"
vue 中 Class 与 Style 绑定 汇总
qq_37027534的博客
03-02 1114
在vue中经常涉及到对元素进行样式绑定,此篇博文归纳了vue中常用到的绑定样式的八种方法.
vue知识点总结
weixin_37582804的博客
11-29 199
v-html :使用 v-html 指令用于输出 html 代码; v-bind:class="{‘class1’: use}" 可用于绑定样式 简写:class .class{ background:#000; } v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px’ } var url=“http://www.baidu....
[vue] class样式数据绑定
柿子大人的博客
03-11 145
<style> .active{ color: green; } .delete{ background:red; } .error{ font-size:35px; } </style> <div id="app"> <p :class="activeClass">字符串表达式</p> <p :class="{delete:isDe
Class文件详解(三)
qq_40328109的博客
08-29 1425
前情回顾 上一篇文章中我们详细介绍了常量池，本文我们来介绍Class文件中的访问标志，类索引、父索引和接口索引集合。 访问标志 在常量池结束以后，紧挨着的两个字节代表访问标志(access_flags)。这个标志用来识别一些类和接口层面的访问信息。 我们现在举个实例来说明这个访问标志是如何识别的。 Comments.java package com.zust.bean; ...
vue动态绑定class的几种方式
热门推荐
前端那点事的博客
10-30 11万+
#####对象方法 -最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染） :class=&quot;{ 'active': isActive }&quot; 判断是否绑定一个active :class=&quot;{'active':isActive==-1}&quot; 或者 :class=&quot;{'active':isActive==index}&quot; 绑定并判断多个 第一种（用
:class="{'mui-active': result===2}" v-bind:class条件报错解决
kouryoushine的博客
08-18 7688
错误 vue.js:634 [Vue warn]: Error compiling template: invalid expression: Unexpected token - in {mui-active: result===1} Raw expression: :class="{mui-active: result===1}" 44 | <div c...
vue中class绑定
m0_64544033的博客
02-15 168
vue中class绑定的方法
Vue的class与style绑定
weixin_44737120的博客
12-26 205
1、class 1.、对象法： <div :class="{active:isshow}"></div> //一个class <div :class="{active:isshow,color:iscolor}"></div>//多个class拼接给对象属性类似 <div class="static" :class="{active:issho...
vue :class 动态绑定样式_（Vue基础）5.Vue中样式绑定（:class和:style）
weixin_39858132的博客
11-22 371
关键词：数据和样式进行绑定：class的对象/数组绑定、style的对象/数组绑定:class="{activated: isActivated}":class="[activated]":style="styleObj" :style="[styleObj], {fontSize: 18px}" 实现需求：点击hello world，字的颜色如：变红 ——> 点击：变黑 ——> ...
Vue外卖项目的学习（1）
weixin_46013619的博客
01-30 203
底部导航栏的实现 这里是用什么标签都行，使用了路由进行了界面的跳转 class：on是一个带颜色的class，这里是为了动态添加，$route中有一个path属性，代表着当前路径 这里的思路是当前路径为msite时，就显示，这里涉及到了class的绑定，使用了对象绑定的方式，也就等同于:class="{on:true}"此时就显示class on <a href="javascript:;...
vue动态绑定class和style
最新发布
11-08
Vue中动态绑定class和style可以通过v-bind指令实现。对于class，可以使用对象语法、数组语法和绑定一个返回对象的计算属性；对于style，可以使用对象语法和数组语法。具体方法如下： 1. 对象语法：将一个对象传给v-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值