vue之小小动态按钮
点击后会变成这样:
<body>
<div id="app">
<button v-on:click="btnClick" v-bind:class="my_cls">{{ msg }}</button>
</div>
</body>
这里的v-on来为事件绑定方法，事件用 :事件名 标注
语法:v-on:事件名 = "事件变量"
事件变量:由vue实例的methods提供
按钮创建完成我们需要在body下进行script添加vue并设置点击事件:
具体代码如下:
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'按钮',
my_cls:'btn'
},
methods:{
btnClick:function(){
if(this.my_cls=='btn'){
this.my_cls='botton'
}else{
this.my_cls='btn'
}
}
}
})
</script>
methods为事件提供实现体 进行点击来判断按钮的my_cls属性来实现具体效果
最后我们在head上设置style样式:
<style>
.btn {
width: 100px;
height: 40px;
background: orange;
}
.botton {
width: 200px;
height: 80px;
background-color: yellowgreen;
}
</style>
这样简单的点击动态效果便完成!
vue之小小动态按钮的更多相关文章
- Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...
- android Button 切换背景，实现动态按钮和按钮颜色渐变
android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变 1.右键单击项目->new->Oth ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- VS2010，MFC动态按钮和窗体背景图片，以及是静态文字控件透明，并避免静态文字刷新出现的重叠问题
1.动态按钮的四种动作 1)正常 2)按下 3)滑过 4)失效 在MFC中,4个动作对应着四种位图bmp, 首先,将代表四种状态的位图加载入资源中,将对应的按钮设置为BitmapButton 第二,在 ...
- MFC动态按钮的创建及其消息响应(自定义消息)
动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC_D_BTN 10000 2.在类的OnInitDialog()函数中动态创建按钮(建立按钮对象时最好建立对象的指针 ...
- MFC动态按钮的创建及其消息响应 和 自定义消息
原文链接: http://www.cnblogs.com/gaohongchen01/p/4046525.html 动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC ...
- Vue.js的动态组件模板
组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...
- vue组件上动态添加和删除属性
1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...
随机推荐
- Kettle-Data Integration 简介
Pentaho系列产品介绍 Pentaho公司下面有一堆关于数据处理(数据整合.数据挖掘.报表等)的开源项目即社区版,入口网站: http://community.pentaho.com/ 数据整 ...
- <rhel6 mysql replication>
MySQL 支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.主服务器将更新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环.这些日志可以记录发送到从服务 ...
- 无需控件直接导出xls(csv)
/// <summary> /// 执行导出 /// </summary> /// <param name="ds">要导出的DataSet&l ...
- Android中渐变图片失真的解决方案
在android开发(尤其是android游戏开发)中有一个很严重的问题就是带有渐变效果的png图片会出现严重的banding(色带),鉴于这种情况,有几种可行的解决方法: 1.如果Activit ...
- 优化Linux的内核参数来提高服务器并发处理能力
提高Linux系统下的负载能力,可以使用nginx等原生并发处理能力就很强的web服务器 使用Apache的可以启用其Worker模式,来提高其并发处理能力 修改Linux的内核相关TCP参数,来最大 ...
- 网页编辑器CKEditor4.3.1+CKFinder2.4+JW Player6.7（视频播放器）集成
CKEditor是使用最多的一款在线网页编辑器,不仅好用,而且功能强大.易扩展.浏览器兼容性好.另外,CKEditor网页编辑器经常更新.本程序使用的是最新稳定版CKEditor4.3.1,添加使用了 ...
- window7防火墙无法更改某些设置，错误代码0×80070422
原因:这是由于管理工具的服务中的windows防火墙被禁用了. 解决方案:在window7中点击控制面板,然后点击管理工具,在点服务,然后找到windows firewall 然后将其改为自动就就可以 ...
- java Vamei快速教程12 类型转换和多态
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们之前使用类创造新的类型(type),并使用继承来便利我们创建类的过程.我将在这 ...
- leetcode－－5 Longest Palindromic Substring
1. 题目: Given a string S, find the longest palindromic substring in S. You may assume that the maximu ...
- PHP:php遍历数组each()方法总结
each()的作用是将数组当前元素的键值对拆成一个新数组,并把下一个元素作为当前元素.比如Array(...,'Robert'=>'Bob',...)中的'Robert'=>'Bob'键值 ...