专栏首页Micro_awake webVue学习4:class与style绑定

Vue学习4:class与style绑定

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

代码如下:

 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>

运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue学习4:class与style绑定

    用户1149564
  • vue的计算属性computed和监听器watch

    用户1149564
  • vue生命周期钩子函数

    1. created与mounted都常见于ajax请求,前者如果请求响应时间过长,容易白屏

    用户1149564
  • Vue学习4:class与style绑定

    用户1149564
  • ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    Bootstrap为我们提供了十几种的可复用组件,包括字体图标、下拉菜单、导航、警告框、弹出框、输入框组等。在你的Web Application中使用这些组件...

    用户1161731
  • bootstrap栅格换行时产生空白解决

    最近使用bootstrap开发项目,但是用到全局css样式中栅格时候出现问题,就是当前窗口的首行正常显示,到了第二行开始则开始不能正常排布!

    十月梦想
  • 入门指南:Node/JavaScript中的模板引擎

    在本文中,我们将介绍如何用Node.js和Express来使用 Handlebars 模板引擎。还会介绍什么是模板引擎,以及如何使用把 Handlebars 建...

    前端小智@大迁世界
  • 使用 Cloudflare Worker 免费搭建网址导航网站

    GitHub:https://github.com/sleepwood/CF-Worker-Dir/ CloudFlare Worker:https://wor...

    Inkedus
  • Bootstrap Metronic 学习记录(二)菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[S...

    用户1149182
  • Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 01.使用include

    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager....

    光束云

扫码关注云+社区

领取腾讯云代金券