<!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. system verilog与C语言的接口(包含使用方法以及实例)

    资料来源 (1) sv绿皮书; (2) vcs user guide; (3) https://www.cnblogs.com/studyforever/p/5169243.html (4) syst ...

  2. linux系统过滤ip地址总结

    Perl模块用法 安装Perl模块 # 官网地址 https://metacpan.org/pod/Regexp::Common # 下载地址 https://cpan.metacpan.org/au ...

  3. Finance财务软件（月度结转专题）

    支持按模板结转 默认结转模板 1.结转收入 借: 6001 主营业务收入 6051 其他业务收入 6301 营业外收入 贷: 4103 本年利润 2.结转成本.费用和税金 借: 4103 本年利润 贷 ...

  4. java第六周学习情况

    这个星期接到了要开学的消息,心情是非常慌张的,毕竟还没有学到多少东西.但确实是要开学了.心中说不出激动还是紧张,那就带着这种奇妙的情绪记录这次的学习吧 首先必然还是看了相关的程序,记没记下来是另外一说 ...

  5. 复制 GUI 状态

    FORM frm_set_pf_status USING pt_extab TYPE slis_t_extab. *--·状态 'STANDARD'是从系统功能组 KKBL GUI状态下的" ...

  6. FTP为什么越来越不好用了？要如何替代？

    FTP相信很多人都不陌生,作为世界范围内第一个文件传输协议,FTP解决了互联网文件传输需求,至今已被广泛使用30多年.但很多人现在慢慢发现,FTP越来越不好用了,或者说越来越无法满足自己需求了,这是为 ...

  7. Python request模块 携带cookie

    # _*_coding:utf-8 _*_ import time import requests import json import sys import random import string ...

  8. （jmeter笔记）聚合报告分析

    Label:说明是请求类型,如Http, FTP等请求. #Samples:也就是图形报表中的样本数目,总共发送到服务器的样本数目. Average:也就是图形报表中的平均值,是总运行时间除以发送到服 ...

  9. Log4NET 日志分割删除与压缩解决思路（附源码）

    最近公司发现,日志产生的太多了,于是让我写个方法来解决,一开始是让我删除,后来想了想让我先压缩再删除文件夹,下面提供两个版本的源代码及简单使用. 注:这两个代码也是博主CV的网上然后修改的,如侵权,请 ...

  10. GPS时钟装置,北斗卫星授时,ntp校时服务器,网络时间服务器

    GPS时钟装置,北斗卫星授时,ntp校时服务器,网络时间服务器 一.GPS时钟装置产品特点:技术交流-岳峰 15901092122:Q522508213 GPS时钟装置是针对计算机.自动化装置等进行校 ...