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. PHP中处理html相关函数集锦

    1.html_entity_decode() 函数把 HTML 实体转换为字符. Html_entity_decode() 是 htmlentities() 的反函数. 例子: <?Php $s ...

  2. qa 工作

    1.定流程--监控参照规范(cmmi,公司自己的,scrum[例会.启动会])--产出物报告 (项目维度)-配置--经盈.财务 2.培训组织-组织讲师(知识库).外部拓展

  3. 2个月搞定计算机二级C语言——真题（11）解析

    1. 前言 今天双 11,正好轮到讲第 11 篇,直接来个三 11. 那么本篇我们讲解2个月搞定计算机二级C语言--真题11 2. 程序填空题 2.1 题目要求 2.2 提供的代码 #include ...

  4. 【ffmpeg】avformat_alloc_context报错System.NotSupportedException不支持所指定的方法

    这个错误报了第二次了,网上搜不到靠谱的解决方案,赶快记录一下. 第一个情况:报错如题目System.NotSupportedException 不支持所指定的方法 第二个情况:如果换autogen版本 ...

  5. oracle怎么查询重复的数据

    在oracle中,可以利用count()函数配合select查询语句来查询重复的数据,语法为"select userCode from user group by userCode havi ...

  6. 【Python自动化测试环境管理】tox

    1. tox基本介绍 1.1 tox是什么? tox 是一个用于管理 Python 项目的自动化测试和环境管理工具.它的主要功能是创建虚拟环境并运行项目的测试套件,tox能够让我们在同一个Host上自 ...

  7. 《机器人SLAM导航核心技术与实战》第1季：第1章_ROS入门必备知识

    <机器人SLAM导航核心技术与实战>第1季:第1章_ROS入门必备知识 视频讲解 [第1季]1.第1章_ROS入门必备知识-视频讲解 [第1季]1.1.第1章_ROS入门必备知识-ROS简 ...

  8. LLMOps MLOPS

    https://www.redhat.com/en/topics/ai/llmops https://www.redhat.com/en/topics/cloud-computing/what-is- ...

  9. 安装yml 与 wget

    一.备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...

  10. Redis实现高并发场景下的计数器设计

    大部分互联网公司都需要处理计数器场景,例如风控系统的请求频控.内容平台的播放量统计.电商系统的库存扣减等. 传统方案一般会直接使用RedisUtil.incr(key),这是最简单的方式,但这种方式在 ...