当前位置：移动技术网 > IT编程>开发语言>JavaScript > 【vue】:class和:style

【vue】:class和:style

2020年07月17日 | 移动技术网IT编程 | 我要评论

文章目录

:class

表达式是一个对象
表达式是一个数组

数组元素是字符串变量
数组元素是一个对象

源码理解

:style

表达式是一个对象
表达式是一个数组

数组元素必须是对象

源码理解

:class

:class='js表达式'

表达式是一个对象

该对象内联在模板里，:class="{key:value}"
key是类名， value是布尔值。
value为true则有该类，false则没有该类

<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>

在这里插入图片描述

:class绑定到data选项里，返回一个对象，:class="cssObj"

<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>

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

<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是字符串变量，其值就是类名。

该数组内联在模板里， :class="[fontClass]"

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

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

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

:class绑定在data选项里，返回一个数组，:class="cssArr"

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

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

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

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

<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}]"
:class="[{smallFont:isSmall}]"，smallFont是类名，isSmall是布尔值。
isSmall为true，所以<p>包含类smallFont。

<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="js表达式"

表达式是一个对象

对象内联在模板里，:style="{属性名1：属性值变量1，属性名2：属性值变量2}"

<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>

:style绑定在data选项里，返回一个对象，:style="styleObj"

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

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

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

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

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

表达式是一个数组

数组元素必须是对象

内联在模板里，:style="[{color:fontColor},{fontSize:fontSize}]"

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

<script>
export default {
    data(){
        return {
            fontColor:"red",
            fontSize:"14px"
        }
    }
}
</script>

绑定在data选项里，返回一个数组，数组中每个元素都是对象

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

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

绑定在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;
}

本文地址：https://blog.csdn.net/qzw752890913/article/details/107348690

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Mysql trace命令介绍

trace作用：对SQL的跟踪，可以知道SQL是如何执行的，比EXPLAIN还要强大。注意点：开启trace工具... [阅读全文]
详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]
详解JavaScript自定义函数

一、定义方法：在javascript中必须用function关键字function funcname(arg1,arg2...){statements;retu... [阅读全文]
fiddler修改host，协议，请求转发

fiddler根据请求路径，修改host，协议，和请求转发if (oSession.host=="517repa... [阅读全文]
如何自定义修改微信链接、QQ链接的标题描述图片

前端时间很多人私信我，问我怎么修改。这里就直接把方法给出来，有什么不懂的可以来问一下我V：jh831x 。或者直... [阅读全文]
ID：32----做一套QQ空间自动加好友的功能

2019年1月7日09:16:03 想法添加背景： 1.QQ空间中添加好友的接口是不会封号的，只会提示你操作过于... [阅读全文]
Redis的数据类型

Redis的五种数据类型：string、hash、list、set、zset。Stringstring类型是二进... [阅读全文]
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】

【2016年信息安全工程师综合知识第11题】11.以下关于认证技术的叙述中，错误的是（）。A．指纹识别技术的... [阅读全文]
安全整改思考之道

最近项目组安全整改，然后需要把所有的安全隐患问题一扫而空，其中也踩了不少的坑，记录下来，以便后续遇到类似问题能立... [阅读全文]

网友评论


验证码：

【vue】:class和:style

2020年07月17日 | 移动技术网IT编程 | 我要评论

文章目录

:class

表达式是一个对象

表达式是一个数组

数组元素是字符串变量

数组元素是一个对象

源码理解

:style

表达式是一个对象

表达式是一个数组

数组元素必须是对象

源码理解

您可能感兴趣的文章:

相关文章:

网友评论