<!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. [原]DOM、DEM、landcover，从tms服务发布格式转arcgis、google服务发布格式

    原作:南水之源 先看看tms和google服务器发布数据的数据排列:(goole地图与arcgis一样) 我现在手上有tms发布的数据,dom,dem等,现在要用arcgis server来发布这些数 ...

  2. Vue-cli项目结构讲解

    |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | ...

  3. Opencv图片明暗处理

    Opencv图片明暗处理 #include <iostream> #include <opencv2/opencv.hpp> using namespace std; usin ...

  4. 查询数据，从链接地址中爬取文章内容jsoup

    查询数据,从链接地址中爬取文章内容 protected void doGet(HttpServletRequest request, HttpServletResponse response) thr ...

  5. 转 zabbix 优化方法 以及 后台数据库查询方法 两则

    ############sample 1 https://blog.51cto.com/sfzhang88/1558254 如何从Zabbix数据库中获取监控数据 sfzhang关注6人评论40627 ...

  6. LODOP带空格和不带空格的字体对齐

    有时候需要用到字体上下对齐,有些需要的文字较多,较少的文字需要加部分空格才能向上面的文字对齐.本文实际测试了一下字体对齐需要的空格.代码是在editplus里写的,该编辑软件里的字体首选项设置的是Co ...

  7. div定位relative和absolute测试1

    div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...

  8. 13点睛Spring4.1-Spring EL

    13.1 Spring EL Spring EL-Spring表达式语言,支持在xml和注解中使用表达式,类似jsp的EL表达式语言; 本教程关注于在注解中使用Spring EL; Spring EL ...

  9. Python - 在CentOS7.5系统中安装Python3

    注意:以下内容均使用root用户执行操作. 1-确认信息 # uname -a Linux localhost.localdomain 3.10.0-957.el7.x86_64 #1 SMP Thu ...

  10. [计算机视觉][ARM-Linux开发]OpenCV 3.1下载 ippicv_linux_20151201失败

    安装OpenCV 3.1的过程中要下载ippicv_linux_20151201,由于网络的原因,这个文件经常会下载失败. 解决的办法是手动下载: 先下载 OpenCV 3.1 Download MD ...