当在一个自定义组件上使用 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. .Net MVC删除图片

    还在学校,菜鸟级别,接触到的只是  /// <summary> /// 根据imageID删除图片 /// </summary> /// <returns>< ...

  2. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  3. 【Luogu】P4067储能表(数位DP)

    题目链接 好的 看到这题之后我一直在想反演,然后想不出来,一度以为自己脑子有问题 然后我脑子真的有问题,这题tm根本就不是反演 设f[i][j][k][l]表示现在已经DP到从高位往低数的第i位,有没 ...

  4. mysql查看语句执行状态的常见函数

    row_count() 返回上一个insert.update.delete语句的影响行数 found_rows() 返回上一个select查到的记录条数 last_insert_id() 返回上一次插 ...

  5. [HNOI2011][bzoj 2329] 括号修复 [splay+前缀和]

    题面: http://www.lydsy.com/JudgeOnline/problem.php?id=2329 思路: 显然,操作4中输出补全的最小费用是关键 这决定了我们不可能在splay上只维护 ...

  6. topK问题解法

    topK问题的最佳解法是堆排,下面介绍用堆排来解决该问题. 堆排解决topK问题的思路,取出前K个数,最重要的就是要减少比较的次数,用堆排维护一个K大小的堆,比如一个小顶堆,则堆顶为堆中最小的值,将堆 ...

  7. AssetDatabase.RenameAsset 重命名文件失败

    今天想写一段Unity Editor 的代码将在 Project Panel 中选中的所有 Texture 改变 Format,然后重命名 成 xxx.Dither.png 然后自动进行上一篇文章提到 ...

  8. HTML 上标和下标

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. hdoj 4293 Groups

    Groups Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  10. 【CF1043C】Smallest Word(构造)

    题意:给定一个由a和b构成的字符串,可以选择翻转或不翻转他的每个前缀,翻转记为1不翻转记为0,求能将字符串排序的字典序最小的操作序列 n<=1e3 思路:考虑极长的一段a [t,w] 翻转t-1 ...