<!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. Java操作ES

    一.ES基本概念 1. 节点:Elastic是一个分布式数据库,每个数据库实例是一个节点Node,一台服务器上可以有多个Node,可以多台服务器协同工作 2. 集群:一组节点Node构成一个集群Clu ...

  2. golang_nethttp

    package main import ( "encoding/json" "fmt" "log" "net/http" ...

  3. chatgpt

    openAI 需要外国手机验证可以使用 当时注册的时候怎么都不成功,后来换了一个浏览器,还是怎么也不行,后再不知怎的就好了 还需要FQ,我用的是日本的线路

  4. Qt开发环境的建立

    在建立开发环境之前,先来了解一下Qt是什么以及它的历史变迁.Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序, ...

  5. 1.Easy Touch 3.1

    Easy Touch 3.1 Hedgehog Team(导入 Easy Touch 插件时自动在菜单栏) Extensions: 拓展 Adding a new joytick: 虚拟摇杆 Addi ...

  6. NOIP2022 游记

    无论结局如何,我都曾经来过. Day -1 zak 模拟赛,被殴打了. Day 0 上午 补模拟赛题. 下午 补模拟赛题. 徐老师过来分配了第二天下午造数据名单. 我造 T2.希望不会太难.(flag ...

  7. Day21 21.2：CrawlSpider-redis分布式爬虫

    CrawlSpider-redis分布式 分布式在日常开发中并不常用,只是一个噱头! 概念: 可以使用多台电脑搭建一个分布式机群,使得多台对电脑可以对同一个网站的数据进行联合且分布的数据爬取. 声明: ...

  8. React中使用CSS的N种方式

    1.在组件中直接使用style,注意,div1各个属性值加双引号 const div1 = { width: "300px", margin: "30px auto&qu ...

  9. wxPython绘图API

    简单介绍一个Pthon的绘图库wxPython. GDI+(图形绘制接口),CoreGraphics和Cairo库形成wxPython绘图API的框架.wx.GraphicsContext是主要绘制对 ...

  10. holiday04

    第四天 查看文件内容 命令 英文 作用 cat 文件名 concatenate 查看.创建.合并.追加文件等功能 more 文件名 more 分屏显示文件内容 grep 搜索文本 文件名 grep 搜 ...