凡是用到了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. [转].Net-C#的委托(代理)和事件

    一.代理 首先我们要弄清代理是个什么东西.别让一串翻译过来的概念把大家搞晕了头.有的文章把代理称委托.代表等,其实它们是一个东西,英文表述都是“Delegate”.由于没有一本权威的书来规范这个概念, ...

  2. python学习笔记(5)

    .................................................................................................... ...

  3. go-mod 入门

    Q群有人问go mod 问题,自己也忘了些.顺便再整理下. GO111MODULE可以设置为三个字符串值之一:off,on或auto(默认值). off 则go命令从不使用新模块支持.它查找vendo ...

  4. vue 学习

    1.安装vue.js 学习链接: https://cn.vuejs.org/v2/guide/ vue官方文档 vscode 软件框架 https://doc.vux.li/zh-CN/ vux文档

  5. Nginx的虚拟主机配置

    虚拟主机技术能够让同一台服务器.同一组Nginx进程上运行多个网站,降低了资金和服务器资源的损耗.Nginx可以配置三种类型的虚拟主机,本文就是主要介绍这三种虚拟主机配置方式. 配置基于IP的虚拟主机 ...

  6. excel写入操作

    字典列表类型数据写入excel. #导入xlwt库 import xlwt import os # 步骤1:获取excel文件的绝对路径 dirPath = os.path.join(os.getcw ...

  7. Tomcat简单优化

    解决 有两种解决办法: 1)在Tomcat环境中解决 可以通过配置JRE使用非阻塞的Entropy Source. 在catalina.sh中加入这么一行:-Djava.security.egd=fi ...

  8. C# Winform ListView实现单元格双击复制内容到剪贴板

    private void listView_MouseDoubleClick(object sender, MouseEventArgs e) { ListView listview = (ListV ...

  9. Ubuntu 16.04下安装搜狗输入法

    在确保更新了国内镜像源的前提下: 安装sogou输入法步骤 一.安装fcitx键盘输入法系统(系统已安装的可忽略此步骤) 1.添加以下源 sudo add-apt-repository ppa:fci ...

  10. JavaEE开发之Spring中的依赖注入与AOP编程

    上篇博客我们系统的聊了<JavaEE开发之基于Eclipse的环境搭建以及Maven Web App的创建>,并在之前的博客中我们聊了依赖注入的相关东西,并且使用Objective-C的R ...