[Vue]样式绑定

最新推荐文章于 2023-06-12 16:48:52 发布
最新推荐文章于 2023-06-12 16:48:52 发布
阅读量398 收藏 1
点赞数
分类专栏： Vue 学习笔记 文章标签： vue.js javascript 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53022813/article/details/127218547
版权

在这里插入图片描述

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

1. 绑定class样式

1.1 class 样式

		<style>
			/* 继承样式 */
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			/* 心情样式 */
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>

1.2 绑定class样式字符串写法

字符串写法适用于样式类名不确定需要动态指定的情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*  */
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    
    .happy{
      border: 4px solid red;;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg,yellow,pink,orange,yellow);
    }
    .sad{
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }
    .normal{
      background-color: skyblue;
    }

    .atguigu1{
      background-color: yellowgreen;
    }
    .atguigu2{
      font-size: 30px;
      text-shadow:2px 2px 10px red;
    }
    .atguigu3{
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div id="root">
    <!-- 盒子具有默认样式basic normal -->
    <!-- :class 用于动态绑定样式 字符串写法  适用于样式类名不确定需要动态指定 -->
    <!-- 点击该盒子时候样式会发生改变，随机修改心情样式 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'zszszs',
      // 默认的心情样式为normal
      mood: 'normal'
    },
    methods: {
      changeMood() {
        // 汇总已有的心情样式
        const moodArr = ['normal', 'sad', 'happy']
        // 随机生成 0 1 2
        const idx = Math.floor(Math.random()*3)
        // 修改心情
        this.mood = moodArr[idx]
      }
    },
  })
</script>
</html>

在这里插入图片描述

1.3 绑定class样式数组写法

数组写法适用于要绑定的样式个数不确定、名字也不确定的情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*  */
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    
    .happy{
      border: 4px solid red;;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg,yellow,pink,orange,yellow);
    }
    .sad{
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }
    .normal{
      background-color: skyblue;
    }

    .atguigu1{
      background-color: yellowgreen;
    }
    .atguigu2{
      font-size: 30px;
      text-shadow:2px 2px 10px red;
    }
    .atguigu3{
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div id="root">
    <!-- :class 用于动态绑定样式  字符串写法  适用于样式类名不确定需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>

    <!-- :class 用于动态绑定样式  数组写法  适用于要绑定的样式个数不确定、名字也不确定 -->
    <!-- 数组写法改变样式，可以对数组中的样式名元素就行修改操作，移除或添加 -->
    <div class="basic" :class="classArr" @click="changeMood">{{name}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'zszszs',
      // 默认的心情样式为 normal
      mood: 'normal',
      // 样式数组
      classArr: ['atguigu1', 'atguigu2', 'atguigu3']
    },
    methods: {
      changeMood() {
        const moodArr = ['normal', 'sad', 'happy']
        const idx = Math.floor(Math.random()*3)
        this.mood = moodArr[idx]
      }
    },
  })
</script>
</html>

在这里插入图片描述

1.4 绑定class样式对象写法

对象写法适用于要绑定的样式个数确定、名字确定，但是需要动态决定样式用不用的情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*  */
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    
    .happy{
      border: 4px solid red;;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg,yellow,pink,orange,yellow);
    }
    .sad{
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }
    .normal{
      background-color: skyblue;
    }

    .atguigu1{
      background-color: yellowgreen;
    }
    .atguigu2{
      font-size: 30px;
      text-shadow:2px 2px 10px red;
    }
    .atguigu3{
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div id="root">
    <!-- :class 用于动态绑定样式  字符串写法  适用于样式类名不确定需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>

    <!-- :class 用于动态绑定样式  数组写法  适用于要绑定的样式个数不确定、名字也不确定 -->
    <div class="basic" :class="classArr" @click="changeMood">{{name}}</div> <br>

    <!-- :class 用于动态绑定样式  对象写法  适用于要绑定的样式个数确定、名字确定，但是需要动态决定用不用 -->
    <div class="basic" :class="classObj" @click="changeMood">{{name}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'zszszs',
      // 默认的心情样式为 normal
      mood: 'normal',
      // 样式数组
      classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
      // 样式对象
      // 默认样式都不使用
      // 需要使用的样式只需要将样式对应的值更改为true即可
      classObj: {
        atguigu1: false,
        atguigu2: false,
        atguigu3: false
      }
    },
    methods: {
      changeMood() {
        const moodArr = ['normal', 'sad', 'happy']
        const idx = Math.floor(Math.random()*3)
        this.mood = moodArr[idx]
      }
    },
  })
</script>
</html>

在这里插入图片描述

2. 绑定style样式

2.1 绑定style样式对象写法

绑定style样式对象写法，style样式对象写在data中，对象中写样式及其对应的值。

如果原来的样式不同单词之间使用-进行连接，需要更改为小驼峰的写法。如：font-size 改写为 fontSize

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 基础样式 */
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="basic" :style="styleObj">{{name}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'ZSZSZS',
      // style样式
      styleObj: {
        fontSize: '40px',
        color: 'red'
      }
    }
  })
</script>
</html>

在这里插入图片描述

2.2 绑定style样式数组写法

2.2.1 写法一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 基础样式 */
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="basic" :style="[styleObj1, styleObj2]">{{name}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'ZSZSZS',
      styleObj1: {
        fontSize: '40px',
        color: 'red'
      },
      styleObj2: {
        backgroundColor: 'orange'
      }
    }
  })
</script>
</html>

在这里插入图片描述

2.2.2 写法2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 基础样式 */
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="basic" :style="styleArr">{{name}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'ZSZSZS',
      styleArr: [
        {
          fontSize: '40px',
          color: 'black'
        },
        {
          backgroundColor: 'red'
        }
      ]
    }
  })
</script>
</html>

在这里插入图片描述

小炜1128
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】基础系列（四）样式绑定 - class - style
YK菌的博客
01-18 2429
class 与 style 的绑定
Vue 中的样式绑定
weixin_33769207的博客
02-11 71
class的对象绑定 在开发的过程中，难免会给dom元素添加一些样式，在 Vue 之中我们该如何绑定样式呢？ 现在有这样一个想法，div被点击一次，变成红色，当再次被点击时，恢复为默认的颜色， 再点击一次又变成红色，想实现这样的操作，如果凭借以前对 Vue 的了解，好像是没有办法实现的，因为我们很难想到数据如何和样式进行绑定，Vue 是...
Vue 绑定样式
qq_46582421的博客
11-12 2232
class样式 写法:class=“xxx” xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定，要动态获取。 对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。 style样式 :style=" {fontSize: xxx}" 其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象。 代码： <!DOCTYPE html> <html lang="en"> <he.
Vue的样式绑定
qq_46149597的博客
11-03 2886
Vue的样式绑定有v-bind:class、v-bind:style,分为内联绑定、非内联绑定、计算属性绑定、数组语法绑定
vue中绑定样式
我不想说
02-19 210
比如我们要实现点击一次为红色，再点击还原，再点击红色，再点击还原，如此反复的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initia...
Vue 样式绑定的实现方法
10-17
Vue.js 是一个流行的前端框架，它的核心特性之一就是数据绑定，其中包括样式绑定。Vue 提供了灵活的方式来操作元素的 `class` 列表和 `style` 内联样式，使得动态响应式的界面设计变得简单易行。在Vue中，我们可以...
Vue绑定内联样式问题
10-17
其中，Vue绑定内联样式是用于动态地将样式应用于组件或元素的一种功能，这在需要根据数据变化来改变元素外观时非常有用。下面我们将深入探讨Vue绑定内联样式的相关知识。 1. **使用v-bind:style** - Vue 提供了 `v...
vue 动态绑定背景图片的方法
10-18
主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧
Vue.js 样式绑定
12-14
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串...
VUE 样式绑定
qixiang_chen的博客
01-13 348
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class &lt;!DOCTYPE html&...
vue样式绑定
打酱油
07-05 383
&lt;div v-bind:class="{ active: isActive }"&gt;&lt;/div&gt;&lt;div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"&gt; &lt;/div&gt;&lt;div id="app"
vue的样式绑定
w18103705129的博客
09-19 392
添加样式一共 有两种 1. style属性添加动态样式的方法 （1）以对象的方式添加 （1.1 ）对象的属性名：是样式的属性名（小驼峰法命名） （1.2 ）对象的属性值： 不加引号，就是绑定的data属性中的变量，加引号，就是普通的演示属性值 （2）以数组的方式添加样式 （2.1 ） 将样式键值对放置在data的某个变量中 （2.2 ）将变量作为数组元素放置在数组中 2. ...
Vue：绑定样式
沉迷写代码的程序猿的博客
03-23 614
Vue：绑定样式 一、绑定class样式 1、字符串写法 2、数组写法 3、对象写法 二、绑定style样式 1、对象写法 2、数组写法 三、总结 Vue：绑定样式 一、绑定class样式 1、字符串写法
VUE——绑定样式
王王仙贝的博客
03-25 88
正常的样式正常写 变化的样式绑定写 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态绑定。 <div class="basic" :class="classstr" @click="changeMood">{{name}}</div> 绑定class样式——数组写法，适用于：要绑定的样式个数不确定、名字也不确定。 <div class="basic" :class="classarr" @click="changeMood">{{name}}<
Vue-样式绑定
qq_64067728的博客
08-31 189
实现效果就是点击后消失，再次点击出现。而上述案例中，一共用了几个知识点和DOM操作中的onclick是一样的然后再和data同级中写methods，再在里面编写函数，实现具体功能。
Vue中的样式绑定
VVVZCS的博客
09-02 2600
实现一个样式，点击完Hello World变色，再点击变回去 一，Class与Style绑定 1，对象语法 首先在div上添加一个handleDivClick函数，然后再绑定一个class，并且class的值为activated，但是class是否有值，让其根据isActivated来判断 当isActivated为false时： 当其为true时 当activated...
Vue中常用的几种样式绑定的方法
2301_77007887的博客
06-06 711
1. 对象语法：对象语法允许我们根据表达式的结果动态地切换样式。在模板中使用 v-bind:class 指令，然后将值设为一个对象。对象的键是对应的CSS类名，而值是一个布尔值，用于指定是否添加该CSS类。3. 绑定内联样式：在模板中使用v-bind:style指令，并将其值设为属性名为驼峰式，值为对应CSS属性值的一个对象。2. 数组语法：数组语法允许我们在一个元素上应用多个类名。只需要在 v-bind:class 指令中传递一个数组即可。
vue绑定样式的三种方法
weixin_42064877的博客
06-12 739
vue绑定样式的三种方法
vue 样式绑定变量
最新发布
09-28
在Vue中，可以使用v-bind指令来实现样式绑定变量。根据引用中的例子，有三种方式来实现样式绑定变量：内联绑定、非内联绑定和计算属性样式绑定。 1. 内联绑定：使用v-bind:class指令将class属性直接绑定为一个对象...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值