10.VUE的样式绑定

最新推荐文章于 2024-06-03 17:48:06 发布

前端杨小白

最新推荐文章于 2024-06-03 17:48:06 发布

阅读量134

点赞数 2

分类专栏： VUE学习笔记

本文链接：https://blog.csdn.net/yangwqi/article/details/108083601

版权

VUE学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

class的对象绑定：借助class以对象的形式将样式与数据进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE的样式绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- :绑定的都是js表达式 div元素上绑定名为activated的class activated是否生效取决于data中的isActivated变量 -->
    <div @click="handleDivClick" :class="{activated:isActivated}">hello world</div>
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        isActivated:false,
    },
    methods:{
        handleDivClick(){
            this.isActivated=!this.isActivated
        }
    }
})
</script>
</body>
</html>

class与数组绑定：数组中的内容代表一个变量在class上会显示这个变量对应的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE的样式绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- div元素上回显示一个class 该class是activated中的内容 -->
    <div @click="handleDivClick" :class="[activated,activatedOne]">hello world</div>
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        activated:"",
        activatedOne:"activated_One"
    },
    methods:{
        handleDivClick(){
            this.activated=this.activated=="activated"?"":"activated"
        }
    }
})
</script>
</body>
</html>

通过这两种方式可以动态向一个DOM元素添加不同的类/删除不同的类从而实现页面效果的变更

内联style通过对象/数组的形式定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE的样式绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 内联style通过对象的形式定义 -->
    <!-- <div @click="handleDivClick" :style="styleObj">hello world</div> -->
    <!-- 内联style通过数组的形式定义 js对象时不能写font-size-->
    <div @click="handleDivClick" :style="[styleObj,{fontSize:'20px'}]">hello world</div>
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        styleObj:{
            color:"black"
        }
    },
    methods:{
        handleDivClick(){
            this.styleObj.color=this.styleObj.color=="black"?"red":"black"
        }
    }
})
</script>
</body>
</html>

前端杨小白

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
10.VUE的样式绑定

class的对象绑定：借助class以对象的形式将样式与数据进行绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>VUE的样式绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
复制链接

扫一扫

专栏目录