vuejs点击class变化的实例


Posted in Javascript onSeptember 05, 2018

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue.js小demo</title>
 <style>
 .static{
 width: 100px;
 height: 60px;
 margin:30px auto;
 display: inline-block;
 cursor: pointer;
 }
 .class-a{
  background: lightpink;
 }
 .class-b{
  background: #eee;
 }
 </style>
</head>
<body> 
<div id="content">
  <span class="static" v-bind:class="{'class-a':isA,'class-b':!isA}" @click="toggle"></span>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
var vm=new Vue({
  el:"#content",
  data:function(){
    return {
      isA:false
    };
  },
  methods:{
    toggle:function(){
      this.isA=!this.isA;
    }
  }
});
 
</script>
</html>

以上这篇vuejs点击class变化的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
前台js调用后台方法示例
Dec 02 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
理解javascript中DOM事件
Dec 25 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
深入理解js中的加载事件
Feb 08 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 #Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
深入理解Vue 的钩子函数
Sep 05 #Javascript
You might like
风格模板初级不完全修改教程
2006/10/09 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php中使用GD库做验证码
2016/03/31 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
浅析JavaScript异步代码优化
2019/03/18 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python里 super类的工作原理详解
2019/06/19 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
简单分析python的类变量、实例变量
2019/08/23 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
2014学年自我鉴定
2014/02/23 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
罚款通知怎么写
2015/04/22 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang