<!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. 微信小程序-通过绑定事件进行传值

    一.数据绑定: <view bindtap="node" data-num="5"> 点击传值:{{nums}} </view> dat ...

  2. CUDA的新功能

    CUDA 9: 配合Volta架构推出: 1. 新的多线程编程范式.Cooperative Groups 2. 优化算法库 CUDA10: 配合Turing架构推出. 1. 新增了对TensorCor ...

  3. Rinetd linxu TCP 端口转发

    Rinetd是为在一个Unix和Linux操作系统中为重定向传输控制协议(TCP)连接的一个工具,实现端口映射/转发/重定向.Rinetd是单一过程的服务器,它处理任何数量的连接到在配置文件etc/r ...

  4. Kubernetes中pod UID的一个用法

    Kubernetes中每个工作Node的路径/var/lib/kubelet/pods里,含该Node上生成的每个pod的一些log文件.而该log文件的名字就是pod对应的UID,如下图所示(Nod ...

  5. C++ Error:C2011: 'struct' type redefinition

    C++ Error:C2011: 'struct' type redefinition        在c语言中,对同一个变量或者函数进行多次声明是不会报错的.所以如果h文件里只是进行了声明工作,即使 ...

  6. 洛谷P5356 [Ynoi2017] 由乃打扑克

    题目 https://www.luogu.com.cn/problem/P5356 思路 由乃题,那么考虑分块(大雾,但确实分块是正解). 题面很清晰,就是求动态的区间第k小,支持区间加法操作. 根据 ...

  7. python爬取知乎的网站内容

    #获取知乎的网站内容 import requests #数据请求模块 第三方模块 pip install requests import re #正则表达式 #网页head头 heads = { 'U ...

  8. display 属性区别

    行内元素 inline,行内块元素 inline-block,块级元素 block 的区别 (可通过 display 属性相互切换) (三个都会自动换行) padding 会挤压设置的宽高,实际宽高= ...

  9. Burp Suite入门

    Burpsuite Burp Suite是一个Web应用程序集成攻击平台,它包含了一系列burp工具,这些工具之间有大量接口可以互相通信,这样设计的目的是为了促进和提高整个攻击的效率.平台中所有工具共 ...

  10. iOS开发之UIImage压缩处理

    IOS中UIImage的数据量压缩有两种方式,一种是图片尺寸不变,降低图片分辨率,代码方法为: //1.0为压缩系数,介于0~1之间.压缩系数越小,会大大降低图片清晰度 NSData *data = ...