• 有红, 黄, 蓝三个按钮, 以及一个200X200px的矩形box, 点击不同的按钮, box的颜色会被切换为指定的颜色
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Title</title>
  7. </head>
  8. <body>
  9. <div id="d1">
  11.    <p :style="myStyle"></p>
  13.    <button :style="{backgroundColor: bgc1}" @click="f1">按钮一</button>
  14.    <button :style="{backgroundColor: bgc2}" @click="f2">按钮二</button>
  15.    <button :style="{backgroundColor: bgc3}" @click="f3">按钮三</button>
  16. </div>
  18. <script src="vue/vue.js"></script>
  19. <script>
  20.    new Vue({
  21.        el: '#d1',
  22.        data: {
  23.            bgc1: 'red',
  24.            bgc2: 'yellow',
  25.            bgc3: 'blue',
  26.            myStyle: {
  27.                width: '200px',
  28.                height: '200px',
  29.                backgroundColor: 'black'
  30.            }
  31.        },
  32.        methods: {
  33.            f1() {
  34.                this.myStyle.backgroundColor = this.bgc1
  35.            },
  36.            f2() {
  37.                this.myStyle.backgroundColor = this.bgc2
  38.            },
  39.            f3() {
  40.                this.myStyle.backgroundColor = this.bgc3
  41.            },
  42.        }
  43.    })
  44. </script>
  46. </body>
  47. </html>
  • 一个200X200px的矩形box, 点击box本身, 记录点击次数, 1次box变为粉色, 2次变为绿, 3次变为蓝色, 4次重新回到粉色, 依次类推
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7. </head>
  8. <body>
  9. <div id="d1">
  11.     <p :style="myStyle" @click="f1">{{ counter }}</p>
  13. </div>
  15. <script src="vue/vue.js"></script>
  16. <script>
  17.     new Vue({
  18.         el: '#d1',
  19.         data: {
  20.             counter: 0,
  21.             bgc1: 'pink',
  22.             bgc2: 'green',
  23.             bgc3: 'cyan',
  24.             myStyle: {
  25.                 width: '200px',
  26.                 height: '200px',
  27.                 backgroundColor: 'black'
  28.             }
  29.         },
  30.         methods: {
  31.             f1() {
  32.                 this.counter += 1;
  33.                 if (this.counter % 3 === 1) {
  34.                     this.myStyle.backgroundColor = this.bgc1
  35.                 }else if (this.counter % 3 === 2) {
  36.                     this.myStyle.backgroundColor = this.bgc2
  37.                 }else {
  38.                     this.myStyle.backgroundColor = this.bgc3
  39.                 }
  40.             }
  41.         }
  42.     })
  43. </script>
  45. </body>
  46. </html>

Vue 小练习01的更多相关文章

  1. vue小例子-01

    1.在components下建一个 2.代码如下: <template> <!--1.业务是开始有一组数据,序号,姓名,性别,年龄,操作(删除)     2.有三个输入框输入姓名,性 ...

  2. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  3. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  4. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  5. Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

  6. Vue小项目二手书商城：（三）前端渲染数据

    实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...

  7. Vue小项目二手书商城：（二）axios前后端数据交互

    实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...

  8. Vue小项目二手书商城：（一）准备工作、组件和路由

    本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...

  9. VUE小练习(按钮颜色，数组映射)

    VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...

随机推荐

  1. 封装读取文件(node js)

    我们都会简单的读取文件,今天我们就来讲一下用函数封装读取文件. 1.首先我们要先建好文件 2.我们在index.js里面写入代码: var http=require('http'); var fs=r ...

  2. 【搞定Jvm面试】 面试官：谈谈 JVM 类加载过程是怎样的？

    类加载过程 Class 文件需要加载到虚拟机中之后才能运行和使用,那么虚拟机是如何加载这些 Class 文件呢? 系统加载 Class 类型的文件主要三步:加载->连接->初始化.连接过程 ...

  3. C#线程学习笔记六：线程同步--信号量和互斥体

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/23/Mutex_And_Semaphore.html,记录一下学习过程以备后续查用.     ...

  4. c++-友元函数和友元类

    友元函数 友元函数和友元类(破坏类的封装性) 面向对象编程思想 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include & ...

  5. django 用户与权限管理

    django中使用content_type表进行存储app与model的关系.在permission表中设立了name(权限的名字,中英文均可)content_type_id(与content_typ ...

  6. iOS 13 presentViewController

    升级了iOS 13,发现代码中使用presentViewController的都变成了这样的,顶部留了一部分 查看present样式,iOS 13 默认自动适配,需要在present的时候,设置sty ...

  7. day05生成随机数、do-while循环、for循环、循环流控(break和continue)、循环嵌套

    复习 1.多重if 一个条件触发的情况在3种或以上时 if(<条件1>){ //条件1为真时运行 }else if(<条件2>){ //条件1为假,条件2为真时运行 }else ...

  8. Springboot整合redis步骤

    一.加入依赖 <dependency> <groupId>com.github.spt-oss</groupId> <artifactId>spring ...

  9. python基础之元组讲解

    概念讲解: 1.Python 的元组与列表十分相似,但是元组的元素只可读不可修改: 2.元组使用小括号,列表使用方括号: 3.元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. (1)创建一 ...

  10. 黑苹果 macOS 10.13.6 17G66 安装 nVidia WebDriver

    目前很多N卡的WebDriver已经不支持macOS 10.14了,只能停留在10.13.6,苹果AppStore下载的 macOS High Sierra 10.13.6 版本号是17G66,遗憾的 ...