<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>changeColor</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<style>

    div {width: 100px;height: 100px;background: lightcoral;}

    .changeColor {background: lightgreen;}

</style>

<body>

    <section id="app">

        <div :class="{changeColor}" @click="changeColor =! changeColor">

        </div>

    </section>

    <script>

        new Vue({

            el: '#app',

            data: {

                changeColor: false

            }

        })

    </script>

</body>

</html>

vue实现简单的点击切换颜色的更多相关文章

  1. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  2. 55.UIbutton点击切换颜色

    #import "ViewController.h" #define width_w     [UIScreen mainScreen].bounds.size.width #de ...

  3. 简单的JS控制button颜色随点击更改

    先上效果图: 默认“今日”是选中状态,是行内样式: <button type="button" id="today" class="btn-li ...

  4. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  5. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  6. 编写最简单的 iPhone 界面切换应用

    编写最简单的 iPhone 界面切换应用   以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建 ...

  7. 基于Django rest framework 和Vue实现简单的在线教育平台

      一.基于api前端显示课程详细信息 1.调整Course.vue模块 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 ...

  8. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  9. 纯css就能实现可点击切换的轮播图，feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

随机推荐

  1. 基因表达半衰期 | mRNA Half-Life

    做单细胞RNA-seq分析,自然就能想到我们测到的其实是一个概率学的东西,就像女士品茶里的酵母的泊松分布一样. 真实的细胞里,一切都是连续的,从DNA到mRNA到蛋白,是有一个时间间隔的,每一个pro ...

  2. 启动项目报错：Unsupported major.minor version 52.0

    解决方案: 确保Build Path或者电脑配置的环境变量版本号,和pom中的一致 Exception in thread "main" java.lang.Unsupported ...

  3. Ionic4.x ion-infinite-scroll 上拉分页加载更多

    <ion-header> <ion-toolbar> <ion-title> Tab One </ion-title> </ion-toolbar ...

  4. linux（centos7.0以上版本）安装 mysql-5.7.24-linux-glibc2.12-x86_64.tar 版本的mysql

      1:查看 linux下是否有老版本的mysql(有删除) 查找old mysql:rpm -qa | grep mysql 卸载:卸载命令:rpm –ev {包名}——:rpm -ev mysql ...

  5. shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查)

    shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查) Shell脚本与MySQL数据库交互(增删改查) # 环境准备:安装mariadb 数据库 [ro ...

  6. 【转载】 tf.split函数的用法

    原文地址: https://blog.csdn.net/uestc_c2_403/article/details/73350457 由于tensorflow 版本更新问题   用法略有修改 ----- ...

  7. dig命令不能使用（-bash: dig: command not found）

    解决方式: 直接使用yum进行安装: yum -y install bind-utils

  8. SFTP服务配置以及命令/代码操作

    POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.or ...

  9. Django安全配置(settings.py)详解

    必须配置项 PASSWORD_HASHER 这个配置是在使用Django自带的密码加密函数的时候会使用的加密算法的列表.默认如下: PASSWORD_HASHERS = ( 'django.contr ...

  10. 复习sql server 2000 MSDE2000 ，安装，打补丁，开1433端口。

    前言: 由于工作需要,一个仍在使用的古董软件需要安装配置. 原有系统是在主机部署,单机安装sql2000,其他机器(分机)也单机部署软件,部署sql2000,通过dtsrun /f sync.dts( ...