（四）-class与style绑定

最新推荐文章于 2024-05-31 17:09:05 发布

吱吱不倦小子

最新推荐文章于 2024-05-31 17:09:05 发布

阅读量263

点赞数

分类专栏： vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/u013109501/article/details/114108198

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 理解

在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术

2.class绑定: :class='xxx'

2.1xxx是字符串

<h2>1. class 绑定: :class='****'</h2>
<!--a是一个变量-->
<p :class="a">XXX是字符串</p>
<!--合并的效果-->
<p class="classC" :class="a">XXX是字符串</p>

2.2xxx是对象

<p :class="{classA:true,classB:false}">XXX是对象</p>

<p :class="{classA:isA,classB:isB}">XXX是对象</p>

2.3xxx是数组

<p :class="['classA','classB']">XXX数组</p>

3.style绑定

<h2>2.style 绑定</h2>
<p :style="{color:activeColor,fontSize:fontSize+'px'}">:style="{color:activeColor,fontSize:fontSize+'px'}"</p>

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class与style绑定</title>
    <style>
        .classA {
            color: #ff0000;
        }
        .classB {
            color: #0000ff;
        }
        .classC {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="demo">
    <h2>1. class 绑定: :class='****'</h2>
    <!--a是一个变量-->
    <p :class="a">XXX是字符串</p>
    <!--合并的效果-->
    <p class="classC" :class="a">XXX是字符串</p>


    <p :class="{classA:true,classB:false}">XXX是对象</p>

    <p :class="{classA:isA,classB:isB}">XXX是对象</p>

    <p :class="['classA','classB']">XXX数组</p>


    <h2>2.style 绑定</h2>
    <p :style="{color:activeColor,fontSize:fontSize+'px'}">:style="{color:activeColor,fontSize:fontSize+'px'}"</p>

    <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#demo',
        data:{
            a:'aclass',
            isA:true,
            isB:false,
            activeColor:'red',
            fontSize:20
        },
        methods:{
            update(){
                this.a='classB'
                this.isA=false
                this.isB=true
                this.activeColor='green'
                this.fontSize=30
            }
        }
    })


</script>
</body>
</html>

吱吱不倦小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（四）-class与style绑定

1. 理解在应用界面中, 某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术2.class绑定: :class='xxx'2.1xxx是字符串<h2>1. class 绑定: :class='****'</h2><p :class="a">XXX是字符串</p><p class="classC" :class.
复制链接

扫一扫

专栏目录