<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>动态绑定类名</title>
     <link rel="stylesheet" type="text/css" href="vue.css">
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
     <div id="vue-app">
         <h1>动态 CSS CLASS </h1>

         <h2> 示例 1</h2>
         <div v-bind:class="{changeColor:changeColor}">
             <span>你妹的</span>
         </div>
         <!--这里绑定单击事件 相当于 给自己取反--->
         <div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">
             <span>你妹的</span>
         </div>

         <h2 v-bind:class="{red:false}">示例 2 false  静态更改 样式</h2>
         <h2 v-bind:class="{red:true}">示例 2 true，查看样式注意有什么不同之处</h2>

         <button v-on:click="changeColor=!changeColor"> change color</button>
         <button v-on:click="changeLength=!changeLength"> change length</button>
         <div v-bind:class="compClasses">
             <span>大哥哥</span>
         </div>
     </div>

     <script src="app.js"></script>
 </body>
 </html>

类名动态绑定 HTML

 new Vue({
     el:'#vue-app',
     data:{
         changeColor:false,
         changeLength:false
     },
     methods:{

     },
     computed:{
         compClasses:function(){
             return {
                 changeColor:this.changeColor,
                 changeLength:this.changeLength
             }
         }
     }

 })

Vue.js

 span{
     background:red;
     display:inline-block;
     padding:10px;
     color:#fff;
     margin: 10px 0;
 }

 .changeColor span{
     background:green;
 }

 .changeLength span:after{
     content:"length";
     margin-left:10px;
 }

CSS

Vue 动态绑定类名的更多相关文章

  1. 微信小程序如何像vue一样在动态绑定类名

    微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44   这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别, ...

  2. vue动态绑定class的最常用几种方式

    vue动态绑定class的最常用几种方式:  第一种:(最简单的绑定) 1.绑定单个class html部分: <div :class="{'active':isActive}&quo ...

  3. vue动态绑定属性--基本用法及动态绑定class

    动态绑定属性v-bind:,语法糖形式:省略v-bind,仅写一个冒号. 一.动态绑定基本属性 1 <body> 2 <!-- v-bind 动态绑定属性-基本用法 --> 3 ...

  4. vue动态绑定类样式ClassName知多少

    对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...

  5. vue动态绑定src加字符串拼接

    关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openw ...

  6. vue动态绑定background：url绑不上的问题

    场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...

  7. vue 动态绑定height以及v-if、v-else的使用

    动态绑定height: :style="{height: slideHeight+'rem'}" slideHeight: 2 如果需要计算来得到高度,如: <p :styl ...

  8. vue动态绑定图片和背景图

    1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...

  9. Vue 动态绑定CSS样式

    今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4  使用进度条的话 就没有2.9. ...

随机推荐

  1. 自定义标签在IE6-8的困境

    或许未来前端组件化之路都是自定义标签,但这东西早在20年前,JSTL已在搞了.现在Web Component还只有webkit支持.但一个组件库,还需要一个特殊的标识它们是一块的.不过这个XML已经帮 ...

  2. Eclipse编译Android项目时出现的问题：Android requires compiler compliance level 5.0 or 6.0. Found '1.8' instead.

    Consle: Android requires compiler compliance level 5.0 or 6.0. Found '1.8' instead. Please use Andro ...

  3. 30.SSH配置文件模板和类库.md

    目录 1.struts2 4.类库 1.struts2 1.<?xml version="1.0" encoding="UTF-8"?>2.< ...

  4. 22.多线程.md

    目录 1.线程的创建和启动 1.1继承Thread类创建线程 1.2继承Runnable接口实现创建线程 1.3使用Callable和Future创建 2.控制线程 2.1 Thread类的join方 ...

  5. GIS案例学习笔记-CAD数据分层导入现有模板实例教程

    GIS案例学习笔记-CAD数据分层导入现有模板实例教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 1. 原始数据: CAD数据 目标模板 2. 任务:分5个图层 ...

  6. android listview中item通过viewpager实现《IT蓝豹》

    android listview中item通过viewpager实现 android listview中item通过viewpager实现,每一个item都支持viewpager实现图片切换功能.本项 ...

  7. Pandas时间序列

    Pandas时间序列 pandas 提供了一组标准的时间序列处理工具和数据算法 数据类型及操作 Python 标准库的 datetime datetime 模块中的 datetime. time. c ...

  8. 学习BOS物流项目第九天

    1 教学计划 1.业务受理需求分析 a. 业务通知单 b.工单 c.工作单 2.创建业务受理环节的数据表 a.业务通知单 b.工单 c.工作单 3.实现业务受理自动分单 a.在CRM服务端扩展方法根据 ...

  9. easyui-属性表格-easyui-propertygrid-列名显示英文官方文档无修改方案

    修改值name value值为中文示例步骤: 1.<table 中    class="easyui-propertygrid" 中的data-options属性中加入  c ...

  10. Eclipse git 冲突合并

    Eclipse有一个git的插件叫EGit,用于实现本地代码和远程代码对比.合并以及提交.但是在本地代码和远程代码有冲突的时候,EGit的处理方案还是有点复杂.今天就彻底把这些步骤给理清楚,并公开让一 ...