凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示:

1. 对象语法:

v-bind:class="{active: isActive, 'text-danger': hasError}"

// 这里的active是在class的名称,isActive是变量

2. 数组语法

<div v-bind:class="[activeClassA, activeClassB]">
data () {
activeClassA: 'active',
activeClassB: 'text-danger'
}

3. style绑定-对象语法

v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

值得注意的是,上面第一种方法是class名称与变量的值进行绑定,
而这里的第三中方法是直接对class里面的style属性与变量进行作用,这里的activeColor与fontSize都为变量

【Vue.js】vue基础: 3种Class和Style绑定语法的更多相关文章

  1. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  2. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  3. Vue.js应用基础

    声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...

  4. vue.js不仅是一种模式,也是一种工程组织方式

    vue.js不仅是一种模式,也是一种工程组织方式

  5. Vue.js的基础学习

    Vue.js的基础网上很多,这里不记录 开始正式页面的开发 1.页面加载时请求数据 methods: { post() { //发送post请求 this.$http.post('../../ashx ...

  6. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  7. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

  8. 使用Webpack加速Vue.js应用的4种方式

    Webpack是开发Vue.js单页应用程序的重要工具. 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能. 其中介绍下面四种方式: 单个文件组件 优化Vue构建 浏览器 ...

  9. Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)

    官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...

随机推荐

  1. 第一次冲刺意见汇总&团队第一阶段总结

    大家对我们小组的意见基本是: 1.设计界面简单 2.功能较少 3.没有实现切换歌曲的功能 谢谢HT小组的走心评价 接下来我们组内准备:1.先调节用户界面,插入一些图片,美化界面,给用户直观的体验上升. ...

  2. 用cmd命令执行SQL脚本

    1.简单说明 osql 为SQL Server的命令 2.要在cmd中执行该命令,一般安装SQL Server后该命令对应的路径会自动添加到系统环境变量中. 3.-S 表示要连接的数据库 -U表示登录 ...

  3. Ubuntu16.04安装之后连不上无线网?有可能是Realtek rtl8822be的原因

    原以为昨天已基本写完在接触到Ubuntu以来遇到的所有问题了... 没想到今天去看有关ROS的资料时,居然无意间又看到了之前遇到的一个巨坑:安装完Ubuntu16.04之后,无线网用不了,根本无法连接 ...

  4. 从url中获得域名

    import java.net.MalformedURLException; import java.net.URL; /** * * @author csh * */ public class AA ...

  5. ABP入门系列(2)——领域层创建实体

    ABP入门系列目录--学习Abp框架之实操演练 这一节我们主要和领域层打交道.首先我们要对ABP的体系结构以及从模板创建的解决方案进行一一对应.网上有代码生成器去简化我们这一步的任务,但是不建议初学者 ...

  6. 这月薪过万的Java高级学习资料,难得一遇的干货,不下载真可惜了!

    大家有没有想我呢 不管你们想不想我 我挺想你们的 通过昨天我不断的 死气白咧各种说好话 最终 要到了Java学科的Java集合学习资料 里面包含视频+资料+源码 堂兄也有一个愿望 希望你们月薪过万后 ...

  7. 怎么使用zepto.js的tap事件引起的探索

    前言:   在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...

  8. [Bash]LeetCode193. 有效电话号码 | Valid Phone Numbers

    Given a text file file.txt that contains list of phone numbers (one per line), write a one liner bas ...

  9. [Swift]LeetCode201. 数字范围按位与 | Bitwise AND of Numbers Range

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...

  10. [Swift]LeetCode240. 搜索二维矩阵 II | Search a 2D Matrix II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...