2020-10-26

使用v-bind来绑定class属性主要是分成了两类，即对象语法与数组语法，其实在数组中也是可以混用对象语法的，但在Demo3中我没有

写出来，有兴趣的话可以自己试试。在HTML中通过对象语法绑定类，对象的key值就是需要绑定的class, value是一个布尔值，为true时就绑定，

否则就不绑定。使用对象数组绑定相对就更简单了，直接把相应的类写入数组就可以了。使用数组绑定时，一般一个类会用一个property来做为别名。

而在组件上绑定上class, 坑爹的，现在还没成功，等后面对组件了更解一些之后再回头来试试。

绑定sytle的方法其实和绑定class差不多，不多说，直接看Demo4。不过有一个点要注意的就是，在Data中写一个css 对象的时候，与平时的css

的proptery是不太一样的。例如 background-color: 'green', 直接这样写是不行的，要么给background-color加上引号，要么就写成驼峰式backgroundColor,

这样就可以不加引号。否则，就会报错，至于为啥，人家就是这么定的，问就是不知道。当然，像color这种只有一个词的property怎么搞都问题不大。

Examples: Demo3.html, Demo4.html

Github:  https://github.com/jvxiao/vue-road

我的Vue之旅（4）的更多相关文章

  1. 我的Vue之旅、04 CSS媒体查询完全指南（Media Quires）

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

  2. 我的Vue之旅 06 超详细、仿 itch.io 主页设计（Mobile）

    第二期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 仿 itch.io 平台主页. 我的主题 HapiGames 是仿 itch.io 的 in ...

  3. 我的Vue之旅、05 导航栏、登录、注册 (Mobile)

    第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...

  4. 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制

    第三期 · 使用 Vue 3.1 + TailWind.CSS + Axios + Golang + Sqlite3 实现简单评论机制 效果图 CommentArea.vue 我们需要借助js的Dat ...

  5. 我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang

    第四期 · 将部分数据存储至Mysql,使用axios通过golang搭建的http服务器获取数据. 新建数据库 DROP DATABASE VUE; create database if not e ...

  6. 我的Vue之旅 10 Gin重写后端、实现页面详情页 Mysql + Golang + Gin

    第三期 · 使用 Vue 3.1 + Axios + Golang + Mysql + Gin 实现页面详情页 使用 Gin 框架重写后端 Gin Web Framework (gin-gonic.c ...

  7. 我的Vue之旅 11 Vuex 实现购物车

    Vue CartView.vue script 数组的filter函数需要return显式返回布尔值,该方法得到一个新数组. 使用Vuex store的modules方式,注意读取状态的方式 this ...

  8. 我的Vue之旅、01 深入Flexbox布局完全指南

    花了几个小时整合的"A Complete Guide to Flexbox"最新版本,介绍了flexbox的所有属性,外带几个实用的例子. 传统布局.Flexbox 布局的传统解决 ...

  9. 我的Vue之旅、02 ES6基础、模块、路径、IO

    自定义模块 为什么要模块?模块化源代码能给我们带来什么好处? 试想一个巨无霸网购平台,在没有模块化的情况下,如果出现bug,程序员就要在几百万行代码里调试,导致后期维护成本上升,为了解决问题,模块化按 ...

  10. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

随机推荐

  1. Docker应用部署（Mysql、tomcat、Redis、redis）

    Docker应用部署mysql5.7 1.拉取镜像 docker pull mysql:5.7 2.查看镜像 docker images 3.创建容器 docker run -id \ -p 3307 ...

  2. sql---一条sql查询语句是如何查询的、更新的

    mysql分为server层和层存储引擎层 类型:InnoDB.MyISAM 查询过程 连接器:与客户端建立连接.获得权限.维持和管理命令 查询缓存:弊大于利,在8.0之后已去除 分析器:对sql语法 ...

  3. 获取另一个frame中的元素

    <frameset cols="12,88" frameborder="no" noresize borders="no" frame ...

  4. 分布式锁—7.Curator的分布式锁

    大纲 1.Curator的可重入锁的源码 2.Curator的非可重入锁的源码 3.Curator的可重入读写锁的源码 4.Curator的MultiLock源码 5.Curator的Semaphor ...

  5. HarmonyOS SDK让小红书鸿蒙用户尽享原生相机的拍摄之美

    小红书是深受年轻人喜爱的生活社交类社区平台,越来越多的人在小红书上分享旅行.日常.心情.近日,不少使用鸿蒙原生版小红书的细心用户已经发现,直接使用小红书拍摄照片与自己使用原相机拍摄有一样清晰美观的呈现 ...

  6. 关于我这周的kotlin的学习：

    今天学习了kotlin方法的参数和一些lambda的一些知识,其中也是和我们上次日报中讲的方法一样,有三种分类,默认参数,具名参数,可变数量的参数.和以前一样,我们举个例子来理解这个知识点:先是默认方 ...

  7. SVG path 标签根据两点和角度绘制弧线

    同步发布:https://blog.jijian.link/2020-04-14/svg-arc/ 由于功能受限,此处不能放 iframe 嵌入链接,如需看到实时效果,请移步 https://blog ...

  8. Netty源码—4.客户端接入流程

    大纲 1.关于Netty客户端连接接入问题整理 2.Reactor线程模型和服务端启动流程 3.Netty新连接接入的整体处理逻辑 4.新连接接入之检测新连接 5.新连接接入之创建NioSocketC ...

  9. 编程神器Trae：当我用上后，才知道自己的创造力被低估了多少

    "AI会让每个人都能成为工具创造者,打破你能力边界,有时候只需要一个想法." AI粉嫩特攻队,2025年3月23日. 前几天参加了一场行业闭门研讨会,满满1个半小时的干货演讲让我收 ...

  10. MySQL 事务隔离级别：社交恐惧症的四个阶段

    MySQL 事务隔离级别:社交恐惧症的四个阶段 在数据库的世界里,数据们也有社交问题!事务隔离级别就是控制它们互相看到对方的程度... 什么是事务隔离? 想象一下,数据库是一个繁忙的餐厅,每个事务都是 ...