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. TIDB 数据库架构概述

    学习目标 题解数据库整体架构 了解 TiDB Server .TiKV.TiFlash.和 PD 的主要功能 文章末尾获取笔记.视频资料,持续更新 体系架构 水平扩容或者缩容 金融级高可用 实时 HT ...

  2. 【独立开发作品】SlideBrowser 一个轻量的滑动浏览器，给你不一样的交互体验

    产品介绍 SlideBrowser是一个滑动浏览器,当你鼠标移动到屏幕边缘,自动出现,当失焦时自动隐藏. 使用场景 在应用全屏模式下查询资料.问 GPT 等 记录一些待办事项或者笔记 查看股市.币市信 ...

  3. antd vue 嵌套表格之实现每次展开一行

    在项目中遇到一个需求,就是使用嵌套子表格时,每次只展示一行,且展开一行另一行收起,直接上代码吧,顺便记录一下 这里需要注意,我们要在外层table组件添加如图三个属性,缺一不可,咳咳,不用杠我那个&l ...

  4. Python Object of type float32 is not JSON serializable

    前言 使用 json.dumps(result) 对数据转 JSON 数据出现错误:TypeError: Object of type float32 is not JSON serializable ...

  5. 一款torrent文件格式分析工具（绿色纯天然）

    点击下载 1.主界面 2.文件分析(显示文件所在分片的位置) 3.获取指定分片所在的peers服务器列表 一只会铲史的猫

  6. delphi获取DOS命令行输出函数 运行CMD命令并获取结果

    procedure TForm1.Button4Click(Sender: TObject); var hReadPipe,hWritePipe:THandle; si:STARTUPINFO; ls ...

  7. BUUCTF---古典密码知多少

    题目 知识 一共给出四种古典密码,分别是:猪圈密码.圣堂武士密码.标准银河字母.栅栏密码 猪圈之前有介绍 圣: 标准银河字母 更多加密方式 解题 对照解密 FGCPFLIRTUASYON 再使用栅栏 ...

  8. 面试题-Netty框架

    前言 Netty框架部分的题目,是我根据Java Guide的面试突击版本V3.0再整理出来的,其中,我选择了一些比较重要的问题,并重新做出相应回答,并添加了一些比较重要的问题,希望对大家起到一定的帮 ...

  9. Linux脚本-自动ping网址列表

    背景 公司某一项业务需要管理多种类硬件,有一些硬件的管理功能没有实现前台展示,检测和硬件之间的网络连接状况需要通过ping每个ip地址来单独实现.在需要大规模调试网络的时候,每个硬件单独ping就显得 ...

  10. Supergateway：MCP服务器的远程调试与集成工具

    Supergateway 是一款专为 MCP(Model Context Protocol)服务器设计的远程调试与集成工具,通过 SSE(Server-Sent Events)或 WebSocket( ...