当在一个自定义组件上使用 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. PHP共享内存的应用shmop系列

    简单的说明 可能很少情况会使用PHP来操控共享内存,一方面在内存的控制上,MC已经提供了一套很好的方式,另一方面,自己来操控内存的难度较大,内存的读写与转存,包括后面可能会用到的存储策略,要是没有一定 ...

  2. socket传输对象

    server public class Server{ private static int port = 8888; private static ServerSocket serverSocket ...

  3. luogu3723 [AH2017/HNOI2017]礼物 【NTT】

    题目 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在她生日的前一天, ...

  4. bzoj4455【ZJOI2016】小星星

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=4455 给一张图和该图的一棵生成树,求可能的编号方案数 sol  :dalao教导我们,看到计数 ...

  5. 使用caffe测试自己的图片

    第一种方法是测试批量图片,使用caffe.bin即可,首先要做的是把你的jpg图片转换为LMDB的格式,如何转换呢?用/build/tools/convert_image --resize_width ...

  6. 【ubuntu】配置zsh

    1. 修改默认shell为zsh chsh -s /bin/zsh echo $SHELL$ 2. 下载oh-my-zsh wget https://raw.github.com/robbyrusse ...

  7. input上传多张图片

    input的file上传多张图片的时候,用ajaxupload这个插件的时候,每次执行完,需要重新生成元素再绑定事件

  8. vmware虚拟机无法ping通主机,也无法联网

  9. Jib构建你的第一个java镜像

    jib Official:GoogleContainerTools/jib 本文示例完整demo github地址 github.com/moxingwang/- 想要了解并且使用jib,首先你得知道 ...

  10. 【CF1073A】Diverse Substring(签到)

    题意:给定一个由小写字母组成的串,要求找出一个子串使得其中出现最多的字母不超过它长度的一半下取整 n<=1e3 思路: #include<cstdio> #include<cs ...