当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

例如,如果你声明了这个组件:

Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class:

<my-component class="baz boo"></my-component>

HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p>

vue组件class绑定的更多相关文章

  1. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

  2. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

  3. contenteditable联合v-html实现数据双向绑定的vue组件

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11466197.html 先看最终实现的demo效果图: (1)上面看似文本域的大框是通过给div ...

  4. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  5. VUE的双向绑定及局部组件的使用

    vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="z ...

  6. Vue - 自定义组件双向绑定

    前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...

  7. 7.vue组件(二)--双向绑定,父子组件访问

    本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...

  8. vue 父子组件双向绑定

    vue组件有2大特性: 1.全局组件和局部组件 2.父子组件的数据传递 接下来直接用demo直接看如何传值(静态传值) father.vue <template> <div> ...

  9. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

随机推荐

  1. firewalld的防火墙

    firewalld的介绍与简单应用 CentOS7的默认防火墙是firewalld,在之前使用iptables时,关闭了firewalld服务,现在反过来关闭iptables服务,打开firewall ...

  2. [luogu2044][NOI2012] 随机数生成器 [矩阵快速幂]

    题面: 传送门 思路: 看一眼这个公式: $x\left[n+1\right]=\left(a\ast x\left[n\right]+c\right) mod m$ 递推,数据范围$n\leq 10 ...

  3. autoprefixer小记

    autoprefixer配置 // var aPostcss = [require('autoprefixer')({ browsers: ['ios>=3','android>=2',' ...

  4. ionic2 使用slides制作滑动效果的类型选择栏

    类似的效果如下图: 1. 生成一个component ionic g component MySlide 2. 在my-slide.html中添加代码: <ion-slides class=&q ...

  5. 合理使用webpack提高开发效率

    虽然公司有提供现成的脚手架工具,但是作为开发人员懂得必要的相关知识还是很重要的.这样有利于提高我们的开发效率,优化我们的代码. 关于npm scripts 什么是npm scripts npm 允许在 ...

  6. 如何在MySQL中导入大容量SQL文件

    在实际工作中,有时需要导入大容量sql文件到MySQL,通常有以下三种方法: (1)通过phpmyadmin,不推荐,有内存等的限制: (2)通过Navicat Premium工具运行sql,不推荐, ...

  7. HDOJ 1085 Holding Bin-Laden Captive!

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  8. hihocoder #1415 : 后缀数组三·重复旋律3

    #1415 : 后缀数组三·重复旋律3 Time Limit:5000ms Case Time Limit:1000ms Memory Limit:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢 ...

  9. 1月24日考试(ftp密码)

    错因分析 ♦对文件的保存不够恰当,例如第一题和第三题的题目,我是真的很愤怒,第一题在我写了一个多小时,终于样例成功.可是当我再一次打开文件时,里面只有我最开始的代码,谁可以告诉我这是为什么(我绝对保存 ...

  10. Heritrix3.0.0启动介绍

    下面开始使用Heritrix3.0.0 进 入CMD(开始->运行),进入Heritrix3.0.0所在目录,我这里是D:/heritrix/heritrix3.0.0/bin,这里 大家截图也 ...