【vue】:class和:style

最新推荐文章于 2024-05-15 00:45:57 发布
最新推荐文章于 2024-05-15 00:45:57 发布
阅读量760 收藏 1
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/107348690
版权

文章目录

:class与class共存

<body>
    <div id="root">
        <div class="warn" v-bind:class='{serious:isSerious}'>{{message}}</div>
    </div>
</body>

.warn{
    font-size: 14px;
}
.serious{
    color:red;
}

import Vue from "vue";
import "./index.css";
const vm = new Vue({
    el:"#root",
    data:{
        message:"attacking",
        isSerious:true
    }
});

在这里插入图片描述

:class

:class='js表达式'

表达式是一个对象
内联在模板里

:class="{key:value}"
key是类名， value是布尔值。
value为true则有该类，false则没有该类

<template>
    <p :class="{smallFont:true}">have a nice day</p>
</template>
<style>
.smallFont{
    font-size:0.75em;
}
</style>

<template>
    <p :class="{smallFont:isSmall}">have a nice day</p>
</template>

<script>
export default {
    data(){
        return {
            isSmall:true
        }
    }
}
</script>

<style>
.smallFont{
    font-size:0.75em;
}
</style>

在这里插入图片描述

绑定在data对象里

:class绑定到data对象里，返回一个对象。

<template>
    <p :class="cssObj">have a nice day</p>
</template>

<script>
export default {
    data(){
        return {
            cssObj:{
                smallFont:true
            }
        }
    }
}
</script>

<style>
.smallFont{
    font-size:0.75em;
}
</style>
绑定到computed里

:class绑定到computed里，返回一个对象

<template>
    <p :class="cssObj">have a nice day</p>
</template>

<script>
export default {
    computed:{
        cssObj:function(){
            return {
                smallFont:true
            }
        }
    }
}
</script>

<style>
.smallFont{
    font-size:0.75em;
}
</style>
表达式是一个数组

数组中的元素既可以是字符串变量，也可以是对象。

数组元素是字符串变量

:class="[str1,str2]"
str1、str2是字符串变量，其值就是类名。

内联在模板里
<template>
   <p :class="['smallFont']">hello world</p>
</template>
<style>
.smallFont{
    font-size:0.75em;
}
</style>


<template>
   <p :class="[fontClass]">hello world</p>
</template>

<script>
export default {
    data(){
        return {
            fontClass:"smallFont"
        }
    }
}
</script>

<style>
.smallFont{
    font-size:0.75em;
}
</style>
绑定在data对象里

:class绑定在data对象里，返回一个数组。

<template>
    <p :class="cssArr">hello world</p>
</template>

<script>
export default {
    data(){
        return {
            cssArr:["smallFont"]
        }
    }
}
</script>

<style>
.smallFont{
    font-size:0.75em;
}
</style>
绑定在computed里

:class绑定在computed里，返回一个数组

<template>
    <p :class="cssArr">hello world</p>
</template>

<script>
export default {
    computed:{
        cssArr:function(){
            return ["smallFont"];
        }
    }
}
</script>

<style>
.smallFont{
    font-size:0.75em;
}
</style>
数组元素是一个对象

在数组中使用对象，:class="[{key:value}]"

<template>
    <p :class="[{smallFont:true}]">hello world</p>
</template>

<style>
.smallFont{
    font-size:0.75em;
}
</style>

<template>
    <p :class="[{smallFont:isSmall}]">hello world</p>
</template>

<script>
export default {
    data(){
        return {
            isSmall:true
        }
    }
}
</script>

<style>
.smallFont{
    font-size:0.75em;
}
</style>
源码理解
const text = "hello world"
const textNode = document.createTextNode(text);
const p = document.createElement("p");
p.appendChild(textNode);
const oldVnode = new VNode(
    "",/**tag */
    {},/**data */
    [],/**children */
    undefined,/**text */
    undefined/**elm */
    );
const vnode = new VNode(
    "p",/**tag */
    {  /**data */
        class:[
            {smallFont:true}
        ]
    },
    [/**children */
        new VNode(
            undefined,
            undefined,
            undefined,
            text,
            textNode
        )
    ],
    undefined,/**text */
    p/**elm */
)
updateClass(oldVnode,vnode);


function VNode(tag,data,children,text,elm){
    this.tag = tag;
    this.data = data;
    this.children = children;
    this.text = text;
    this.elm = elm;
}


function updateClass(oldVnode,vnode){
    var el = vnode.elm;
    var data = vnode.data;
    var oldData = oldVnode.data;
    var cls = genClassForVnode(vnode);
    if(cls!==el._prevClass){
        el.setAttribute('class',cls);
        el._prevClass = cls;
    }
}

function genClassForVnode(vnode){
    var dynamicClass = vnode.data.class;
    if(isDef(dynamicClass)) return stringifyClass(dynamicClass);
    return '';
}

function stringifyClass(value){
    if(Array.isArray(value)){
        return stringifyArray(value);
    }
    if(isObject(value)){
        return stringifyObject(value);
    }
    if(typeof value==="string"){
        return value;
    }
    return '';
}

function stringifyArray(value){
    var res = '';
    var stringified;
    for(var i=0,l=value.length;i<l;i++){
        stringified = stringifyClass(value[i]);
        if(isDef(stringified) && stringified!==''){
            if(res) res+=' ';
            res += stringified;
        }
    }
    return res;
}

function stringifyObject(value){
    var res = '';
    for(var key in value){
        if(value[key]){
            if(res) res+=' ';
            res+=key;
        }
    }
    return res;
}

function isDef(v){
    return v!==undefined && v!==null;
}
function isUndef(v){
    return v===undefined || v===null;
}
function isObject(obj){
    return obj!==null &&  typeof obj === "object";
}

:style与style共存

<body>
    <div id="root">
    <div style="font-size:14px;" v-bind:style='{color:"red"}'>{{message}}</div>
    </div>
</body>

import Vue from "vue";
const vm = new Vue({
    el:"#root",
    data:{
        message:"attacking",
    }
});

在这里插入图片描述

:style

:style="js表达式"

表达式是一个对象
内联在模板里

:style="{属性名1：属性值变量1，属性名2：属性值变量2}"

<template>
    <p :style="{color:'red',fontSize:'14px'}">hello world</p>
</template>

<template>
    <p :style="{color:fontColor,fontSize:fontSize}">hello world</p>
    <!-- <p :style="{color:fontColor,'font-size':fontSize}">hello world</p> -->
</template>

<script>
export default {
    data(){
        return {
            fontColor:"red",
            fontSize:"14px"
        }
    }
}
</script>
绑定在data对象里

:style绑定在data对象里，返回一个对象。

<template>
    <p :style="styleObj">hello world</p>
</template>

<script>
export default {
    data(){
        return {
            styleObj:{
                color:"red",
                fontSize:"14px"
            // "font-size":"14px"
            }
        }
    }
}
</script>
绑定在computed里

:style绑定在computed里，返回一个对象

<template>
    <p :style="styleObj">hello world</p>
</template>

<script>
export default {
    computed:{
        styleObj:function(){
            return {
                color:"red",
                fontSize:"14px"
                // "font-size":"14px"
            }
        }
    }
}
</script>
表达式是一个数组
数组元素必须是对象
内联在模板里
<template>
    <p :style="[{color:'red'},{fontSize:'14px'}]">hello world</p>
</template>

<template>
    <p :style="[{color:fontColor},{fontSize:fontSize}]">hello world</p>
</template>

<script>
export default {
    data(){
        return {
            fontColor:"red",
            fontSize:"14px"
        }
    }
}
</script>
绑定在data对象里

绑定在data对象里，返回一个数组，数组中每个元素必须是对象。

<template>
    <p :style="[styleObj1,styleObj2]">hello world</p>
</template>

<script>
export default {
    data(){
        return {
            styleObj1:{
                color:"red"
            },
            styleObj2:{
                fontSize:"14px"
            }
        }
    }
}
</script>
绑定在computed里

绑定在computed里，返回一个数组，数组中每个元素必须是对象

<template>
    <p :style="[styleObj1,styleObj2]">hello world</p>
</template>

<script>
export default {
    computed:{
        styleObj1:function(){
            return {
                color:"red"
            }
        },
        styleObj2:function(){
            return {
                fontSize:"14px"
            }
        }
    }
}
</script>
源码理解
const text = "hello world"
const textNode = document.createTextNode(text);
const p = document.createElement("p");
p.appendChild(textNode);
const oldVnode = new VNode(
    "",/**tag */
    {},/**data */
    [],/**children */
    undefined,/**text */
    undefined/**elm */
    );
const vnode = new VNode(
    "p",/**tag */
    {  /**data */
        style:[
            {color:"red"},
            {fontSize:"14px"}
        ]
    },
    [/**children */
        new VNode(
            undefined,
            undefined,
            undefined,
            text,
            textNode
        )
    ],
    undefined,/**text */
    p/**elm */
)
updateStyle(oldVnode,vnode);


function VNode(tag,data,children,text,elm){
    this.tag = tag;
    this.data = data;
    this.children = children;
    this.text = text;
    this.elm = elm;
}


function updateStyle(oldVnode,vnode){
    var el = vnode.elm;
    var style = normalizeStyleBinding(vnode.data.style) || {};
    var oldStyle = oldVnode.data.style || {};
    var name,cur;
    for(name in oldStyle){
        if(isUndef(style[name])){
            setProp(el,name,'')
        }
    }
    for(name in style){
        cur = style[name];
        if(cur !== oldStyle[name]){
            setProp(el,name,cur===null?'':cur);
        }
    }
}

function normalizeStyleBinding(bindingStyle){
    if(Array.isArray(bindingStyle)){
        return toObject(bindingStyle);
    }
    return bindingStyle;
}

function toObject(arr){
    var res = {};
    for(var i=0;i<arr.length;i++){
        if(arr[i]){
            extend(res,arr[i]);
        }
    }
    return res;
}

function extend(to,_from){
    for(var key in _from){
        to[key] = _from[key];
    }
    return to;
}

function setProp(el,name,val){
    el.style[name] = val;
}

function isDef(v){
    return v!==undefined && v!==null;
}
function isUndef(v){
    return v===undefined || v===null;
}

render函数实现组件

//index.html
<body>
    <div id="root">
    </div>
</body>

//index.css
.smallFont{
    font-size:0.75em;
}

//index.js
import Vue from "vue";
import App from "./app.vue";
import "./index.css";
Vue.component("MyComponent",{
    render:function(createElement){
        return createElement(
            'p',
            {
                style:{
                    color:"red"
                },
                class:{
                    smallFont:true
                }
            },
            'have a nice day'
        );
    }
})
const vm = new Vue({
    render:function(createElement){
        return createElement(App)
    }
}).$mount('#root');

//app.vue
<template>
    <MyComponent/>
</template>

在这里插入图片描述

richest_qi
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
统一封装Logger对象并获取正确的位置信息
LitRad
12-24 1006
平时项目中,我们一般会在每一个类中定义一个logger对象,一般是使用日志门面系统slf4j去获取日志对象 private static final Logger logger = LoggerFactory.getLogger(xx.class); 但是考虑到项目文件如果非常之多,可能会非常麻烦,当然,可以使用lombok(这真是太好用了).还有一种方案就是自己定义一个Logger...
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的 DOM 将与数据保持同步，每当数据有改动，...
在vue中关于 :class 的几种使用方式
_淘淘子的博客
08-01 8603
最近一直在做vue项目 从网上搜索到的资料不太多。关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的。 一 class 1、 自定义class 通过vue computed 计算属性，实现 我的class 是名称+时间戳，是独一份的，可以作为id角色使用。 html: <div :class="_mod...
Vue中使用 class 类样式的方式
最爱喝怡宝的博客
11-20 6887
在vue中为我们提供了 几种方式来使用class类的样式
Vue项目：style样式篇
最新发布
2401_84152928的博客
05-15 467
class=" { ‘classA’ : f，‘classB’：g } " //条件f成立则使用style标签中定义好的classA样式，条件g成立则使用classB样式。特别是对第三方组件样式的修改，想修改第三方组件的样式，又不想去掉scoped属性，影响别的组件。//自定义.css的样式路径。很多时候，我们希望样式只在当前组件生效，样式可以私有化，避免影响其他的组件，造成全局的样式污染。在style标签中添加scoped属性，可以使样式只在当前的组件中生效，样式私有化。/*引入公共样式*/
vue :class的常用方法
18岁的蛋蛋博客
07-11 1万+
1.：class用来展示某个div的active状态 <template> <div class="name">绑定新手机</div> <van-field v-model="phone" placeholder="请输入手机号" :class="{'error': errPhone}"/> <div class="errorPhone...
vue、uniapp中动态添加绑定style、class 9种方法实现
一步一个脚印，踏实努力，向着目标前进
08-31 8662
使用场景：当class和style属性是固定不变的时候，可以直接在模板中写死。优点：简单直接，没有额外的计算和逻辑。缺点：无法根据条件动态修改class和style。使用场景：当class和style属性需要根据组件的data或props属性动态变化时，可以使用v-bind来动态绑定。优点：可以根据条件动态修改class和style。缺点：需要在模板中写表达式，有一定的复杂度。使用场景：当class和style属性的计算逻辑比较复杂时，可以使用计算属性来生成class和style对象。
vue基础之v-bind属性、class和style用法分析
10-17
总结来说，`v-bind`指令在Vue中用于动态地绑定HTML元素的属性，包括`class`和`style`。结合对象和数组语法，我们可以灵活地根据数据模型来控制元素的样式和类，从而实现动态的界面渲染。在实际开发中，这种功能极大...
vue绑定class与行间样式style详解
08-29
Vue 绑定 Class 与行间样式 Style 详解 Vue 是一个流行的前端框架，提供了强大的绑定机制来控制 HTML 元素的样式。...Vue 提供了多种方式来绑定 Class 和行间样式 Style，这些方式可以灵活地应用于不同的开发场景中。
vue计算属性+vue中class与style绑定(推荐)
10-15
1. **对象语法**：和`class`绑定类似，你可以提供一个对象，键是样式属性，值是样式值。 ```html <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> ``` 2. **数组语法**：你也可以提供...
Vue的Class与Style绑定的方法
12-29
本文介绍了Vue的Class与Style绑定，分享给大家，具体如下： 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： <style> .exp{ border: 1px solid #ccc; } .forExp{...
Vue框架（绑定class样式）
zky__sch的博客
08-03 768
虽然有很多中绑定类样式的方法，但是每种类型各有千秋，要根据使用场景来去使用。
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 6297
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
vue中动态添加样式 :style 和 :class
热门推荐
Sunny_lxm的博客
03-05 1万+
动态添加可以采用：class 也可以采用：style 但是在一个长期维护的项目里面：style行内样式尽量避免。 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：bo...
Vue学习：Vue中的class与style样式绑定
qq_49916504的博客
06-09 2080
Vue中的class和style样式绑定
Vue与class和style
qq_40837310的博客
02-07 422
简介 这篇文章主要介绍如何在vue中绑定class和样式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue与css</title> <style> .basic{ height: 200px; margin-bottom: 10p
vue样式（style）和属性（class）绑定的几种基本方法
Queen_zdd的博客
10-24 1万+
绑定语法<div v-bind:class=""></div> 可简写为： <div :class=""></div> style同上class属性绑定：1.我们可以为 v-bind:class 设置一个对象，从而动态的切换 class<style> .test1{ color:red; } .test2{ background:yellow;
vue ：class,style绑定的几种写法
yangbaobao的博客
06-13 9166
class属性绑定：1.绑定变量&lt;div :class="{classA:a , classB: b,......}"/&gt;&lt;/div&gt; new Vue({ el:'#app', data:{ a:true,//根据true/false判断是否执行class b:true } ...
vue :class与:style
linecloud的博客
06-13 434
<div v-bind:class="{ active: isActive }"></div> 1.当active 为true时 div会增加一个isActive的类。 2. :class也可放置变量 <div v-bind:class="classObject"></div> data: { classObject: { ac...
vue :class 动态绑定样式
05-01
:class也可以和v-bind一起使用，用于绑定多个class。语法格式：v-bind:class="[ '样式1', { '样式名2': 条件2 }, ...]" 总的来说，Vue中:class指令是非常强大的，可以通过简单的语法方便地绑定动态样式，让网页的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值