<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .active {

            border:1px solid red;

            width:100px;

            height:100px;

        }

        .error {

            background-color: orange;

        }

    </style>

</head>

<body>

    <div id = "app1">

        <div>

            <div v-bind:class="{active:isActive,error:isError}">测试样例</div>

            <button v-on:click="handle">切换</button>

        </div>

    </div>

    <script src="vue.js"></script>

    <script>

        var vue1 = new Vue({

            el: '#app1',

            data:{

                isActive:true,

                isError:true

            },

            methods:{

                handle:function(){

                    this.isActive = !this.isActive;

                    this.isError = !this.isError;

                }

            }

        })

    </script>

</body>

</html>

以上是class样式绑定

5vue 样式绑定的更多相关文章

  1. wpf样式绑定 行为绑定 事件关联 路由事件实例

    代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用 ...

  2. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  3. Vue（九）：样式绑定v-bind示例

    Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 st ...

  4. vue的样式绑定

    vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...

  5. angularJS 状态样式绑定

    angularJS提供输入框不同状态下的样式绑定 输入框有4种状态 ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error): <!DOCT ...

  6. Vue.js：样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  7. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. Vue 将样式绑定到一个对象让模板更清晰

    Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...

  9. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

  10. VueJS样式绑定v-bind:class

    class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它 ...

随机推荐

  1. wpf 解决画图模糊或抗锯齿以及文字模糊或抗锯齿问题

    解决方案中使用的.Net FrameWork版本:4.6.1 画图模糊或抗锯齿: 控件属性加入  SnapsToDevicePixels="True" 文字模糊或抗锯齿: 控件属性 ...

  2. 集群分发xsync xcall kafka启动脚本命令，命令方式安装epel源

    安装epel库源 yum install epel-release -y --nogpgcheck yum install glances 安装开始 建立hosts 白名单 127.0.0.1 loc ...

  3. Npoi.Mapper 日期转换

    问题:Excel文档里有一些列是日期类型的数据,使用Mapper默认的转换,发现生成的实体,在有的系统环境下能正常转换,但是在有的系统环境下,转换的日期出现中文. 猜想是Excel文档里,日期列的单元 ...

  4. 前端项目线上部署记录 | vue-cli

    一.修改公开路径后打包;npm run build 新建一个vue.config.js文件,如果本地打开,则路径为"./',线上则'/',不加'.' module.exports = { p ...

  5. Websocket(websocket自定义协议)

    是基于TCP的 tcp特征: 我发数据对端可以接收到,对端发数据我可以收到 先发先收到,后发后收到 使用websocket客户端发给服务器数据,服务器回客户端返回数据流程(自定义websocket协议 ...

  6. STM32-USART打印字符、字符串函数自己犯的错误反思

    void UART_Send_Byte(USART_TypeDef *USARTx, uint8_t cha) { USART_SendData(USARTx, cha); while(USART_G ...

  7. ABAP 物料主数据 屏幕增强按钮

    首先看效果,目标是在物料主数据中 基础数据页面新增一个按钮来满足跳转需求,这里以跳转百度为例 页面效果如下: 创建定制程序 事务代码 SPRO,路径:后勤-常规 -> 物料主数据 -> 配 ...

  8. 记SpringBoot中 Consider defining a bean of type 'com.xxx.classname' in your configuration 错误的解决办法

    一.背景 笔者项目中.有两个子模块代码.需要分别在不同的包名中运行,假设一个包名为 cn.com.a,另一个包名为cn.com.b.由于启动类只加了@SpringBootApplication注解,所 ...

  9. IE 浏览器element-ui table: show-overflow-tooltip 临界值时失效

    问题: 在使用el-table表格时,有时会用到show-overflow-tooltip属性,即当单元格内容不能完全显示时显示tooltip文字提示,并且单元格里的内容显示省略号. 但是在ie浏览器 ...

  10. Django 之 Form

    forms组件 1. 校验字段功能 针对一个实例:注册用户讲解. 模型:models.py class UserInfo(models.Model): name=models.CharField(ma ...