赞
踩
参考来源:
点击按钮,增加减少count,并修改按钮背景颜色;
点击加号按钮,偶数为粉色,奇数为透明,点击减号按钮,偶数为红色,奇数为透明。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>title</title>
- </head>
- <body>
- <div id="app">
- <p>count的值是:{{ count }}</p>
- <button @click="add(1,$event)">+ n</button>
- <button @click="sub(1,$event)">- n</button>
- </div>
-
- <!-- 导入vue的库文件 -->
- <script src="./lib/vue-2.6.12.js"></script>
-
- <!-- 创建vue的实例对象 -->
- <script>
- const vm = new Vue({
- // 表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器
- el: '#app',
- // data对象就是要渲染到页面上的数据
- data: {
- count: 0,
- },
- // 定义事件的处理函数
- methods: {
- add (n,e) {
- this.count += n;
- // 判断this.count的值是否为偶数
- if(this.count % 2 === 0){
- e.target.style.backgroundColor = 'pink'
- }else {
- e.target.style.backgroundColor = ''
- }
- },
- sub (n,e) {
- this.count -= n;
- if(this.count % 2 === 0){
- e.target.style.backgroundColor = 'red'
- }else {
- e.target.style.backgroundColor = ''
- }
- }
-
-
- }
- })
- </script>
- </body>
- </html>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。