Vue基础-样式绑定

最新推荐文章于 2023-10-28 13:46:38 发布

多一点开心

最新推荐文章于 2023-10-28 13:46:38 发布

阅读量165

点赞数

分类专栏： vue

本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。

本文链接：https://blog.csdn.net/qq_38060231/article/details/108944630

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了Vue中实现数据改变样式随之变化的方法，包括class的对象绑定、数组绑定以及内联样式的对象和数组定义方式，帮助理解Vue的动态样式管理。

摘要由CSDN通过智能技术生成

一、样式绑定

希望数据改变样式也跟着改变
方法一：class的对象绑定
在这里插入图片描述

方法二：class的数组绑定

方法三：内联样式（内联也可以通过对象和数组两种方式定义）
对象定义
数组定义，样式由数组里的对象决定

二、代码

<!DOCTYPE html>
<html>
 <head>
 	<meta charset="utf-8">
 	<title>样式绑定</title>
 <script src="./vue.js"></script>
 <style>
   .activated {
     color: #19d896;
     font-weight: bold;
     font-size: 20px;
   }
 </style>
 </head>
 <body>
 <div id="app">
   <!--
     :class="{activated: isActivated}" 
     在这个元素上有一个class，这个clas的名字叫activated，
     而这个activated显不显示取决于isActivated这个变量
   -->
   <!--
     @click="handleClick"
     点击假期快乐执行handleClick方法，将isActivated取反
   -->
   <!--
     :class="[activated]"
     class的名字是activated变量里面的内容
   -->
   <!-- <div @click="handleClick" :class="{activated: isActivated}">
     假期快乐
   </div> -->
   <!-- <div @click="handleClick1" :class="[activated]">
     假期快乐
   </div> -->
   <!-- <div @click="handleClick2" :style="styleObj">
     假期快乐
   </div> -->
   <div @click="handleClick2" :style="[styleObj, {fontSize: '20px'}]">
     假期快乐
   </div>
 </div>
 <script>
   var vm = new Vue({
     el: "#app",
     data: {
       /* isActivated: false */
       /* activated: "" */
       styleObj: {
         color: "black"
       }
     },
     methods: {
       handleClick2: function() {
         this.styleObj.color = this.styleObj.color === "black" ? "#19d896" : "black"
       },
       handleClick: function() {
         this.isActivated = !this.isActivated;
       },
       handleClick1: function() {
         this.activated = this.activated === "activated" ? "" : "activated"
       }
     }
   })
 </script>
 </body>
</html>