Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue学习4:class与style绑定

Vue学习4:class与style绑定

作者头像
用户1149564
发布于 2018-07-31 08:35:46
发布于 2018-07-31 08:35:46
73500
代码可运行
举报
文章被收录于专栏:Micro_awake webMicro_awake web
运行总次数:0
代码可运行

说明:有些部分我只是相当于做一个学习笔记,加强记忆之用。所以可能阅读性不是那么强。如果有参考我这类博客的人,那么请见谅。

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue5</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <!--class与style是html元素的属性,在vue中应该使用v-bind来设置样式属性-->
12 <!--vue.js的v-bind专门对此做了加强,表达式的结果除了字符串,还可以是对象或者数组-->
13 <div id="app">
14     <!--这里:class等价于v-bind="class",使用了缩写-->
15     <!--第一部分-->
16     <!--1.:class设置一个对象,从而可以切换class-->
17     <div :class="{classA:isClassA}">this will be orange</div>
18 
19     <!--2.我们也可以在对象中传入更多的属性来切换多个class-->
20     <!--hasError设置的样式覆盖了isClassA的字体颜色样式-->
21     <div :class="{classA:isClassA, hasError:hasError}">this will be red</div>
22 
23     <!--3.我们也可以直接绑定数据里的一个对象-->
24     <div :class="classObject">this will be same to the second</div>
25 
26     <!--4.我们可以绑定返回对象的计算属性;比较常用且强大-->
27     <div :class="classObject1">this will be red</div>
28 
29     <!--5.我们可以为:class设置一个数组-->
30     <div :class="[classB, classC]">this will be red</div>
31 
32     <!--6.使用三元表达式来切换class-->
33     <div :class="[classB, isClassC? classC :'']">this is red too</div>
34 
35     <br>
36     <!--第二部分-->
37     <!--:style可以用来设置样式-->
38     <div :style="{border:border,fontSize:fontSize+'px'}">this is style </div>
39     <br>
40     <!--:style绑定到样式对象-->
41     <div :style="styleObject">this is style2</div>
42     <br>
43     <!--使用数组将多个样式对象运用到一个元素上-->
44     <div :style="[style1,style2]">this is style3</div>
45 
46     <!--:style使用需要添加浏览器引擎前缀的css属性时,如transform时,vue.js会自动侦测并添加相关前缀-->
47 </div>
48 
49 <style>
50     #app .classA, #app .isClassA1{
51         color: orange;
52     }
53     #app .hasError, #app .hasError1{
54         color: red;
55         font-size: 20px;
56     }
57 </style>
58 
59 <script>
60     var vm=new Vue({
61         el: '#app',
62         data:{
63             isClassA: true,
64             hasError: true,
65             classObject:{
66                 isClassA1: true,
67                 hasError1: true
68             },
69             classB: 'classA',
70             classC: 'hasError',
71             isClassC :true,
72 
73             border: '1px solid gold',
74             fontSize: 20,
75             styleObject:{
76                 color: 'orange',
77                 border: '1px solid black'
78             },
79             style1:{
80                 color:'silver'
81             },
82             style2:{
83                 border:'1px solid gold',
84                 fontSize: '20px'
85             }
86         },
87         computed:{
88             classObject1:function(){
89                 return {
90                     classA: this.isClassA && !this.hasError,
91                     hasError: this.hasError
92                 }
93             }
94         }
95     });
96 </script>
97 </body>
98 </html>

运行结果:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue的!class和!style
写 inline style 的方法跟 class 大同小异,一样可以使用阵列及物件语法,但在给css 属性时要注意有些以**-**连结的词,要改为驼峰式写法,或者是使用单引号括起来。
leader755
2022/03/07
9400
Class与Style绑定
本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性). 因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符串拼接麻烦且易错。因此,再将v-bind用于class和style属性时,Vue.js做了专门的增强,表达式结果类型除了字符串以外还可以是对象或者数组. 1、对象语法 (1)、绑定的数据对象内联在模版中 我们可以通过给html标签追加v-bind:class的指令,以动态的切换class,html代码如下: <
郑小超.
2018/01/26
1.5K0
v­bind以及class与style的绑定-vue笔记4
在数据绑定中,最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动 态绑定
bamboo
2019/01/29
2K0
VUE属性绑定
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
张哥编程
2024/12/19
1600
VUE属性绑定
前端成神之路-vue01
Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 使用Vue将hell
海仔
2021/03/03
1.3K0
VUE-指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
cwl_java
2020/02/11
2.5K0
Vue.js-Class与Style绑定 原
(adsbygoogle = window.adsbygoogle || []).push({});
tianyawhl
2019/04/04
3.5K0
Vue3 样式绑定(下)
可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
陈不成i
2021/07/28
8490
vue指令和用法?
vue基本指令 本质就是自定义属性 Vue中指令都是以 v- 开头 v-cloak 防止页面加载时出现闪烁问题 v-text v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题 如果数据中有HTML标签会将html标签一并输出 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值 <div id="app"> <!-- 注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text
青梅煮码
2023/01/16
1.3K0
十一.Vue Style绑定
十一.Vue Style绑定
Java架构师必看
2021/05/14
1K0
Vue零基础到高阶第二节☀️
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。
苏州程序大白
2022/04/13
5.2K0
Vue零基础到高阶第二节☀️
Vue绑定style样式
在Vue.js中,绑定style样式是一种常用的技术,用于根据数据的状态或计算属性动态地修改元素的样式。通过绑定style样式,您可以根据特定条件改变元素的颜色、大小、位置等样式属性。
堕落飞鸟
2023/05/20
1.2K0
Vue模板语法
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如图所示。
清出于兰
2022/01/05
2.2K0
Vue模板语法
前端三大框架之Vue-day01
可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上
用户10169043
2022/11/16
1.9K0
Vue_Study02
vue 中不仅可以通过事件来和用户进行交互,也可以同通过键盘按键来交互,使用 v-on:keyup.enter=“xxx” 的格式来为指定的键盘事件指定处理逻辑,一般情况下是对某个具体键盘事件进行专门的处理逻辑,如果不指定具体按键则会是所按键都会出发事件。
Echo_Wish
2023/11/30
1900
Vue_Study02
vue学习笔记(3)--computed, watch,calss, style
声明一个计算属性severmessage,在computed中被指向对message进行一些方法操作后的返回值
子舒
2022/06/09
7510
Vue基础:数据绑定
大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 指令
奋飛
2021/08/30
3920
VUE绑定与渲染机制
在应用界面中, 某个(些)元素的样式是变化的 class/style 绑定就是专门用来实现动态样式效果的技术
张哥编程
2024/12/13
1160
Vue.js 样式绑定
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
陈不成i
2021/07/27
6.2K0
​vue.js入门篇之Vue.js 样式绑定
在 Vue.js 中,我们可以使用 v-bind 来动态设置元素的 class 和 style 样式属性。
iOS程序应用
2023/03/15
2.1K0
​vue.js入门篇之Vue.js 样式绑定
相关推荐
vue的!class和!style
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验