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' ...
随机推荐
- 将本地代码添加到github
首先在github上创建一个仓库. 第一步:建立本地仓库 git init 关联远程仓库 git remote add origin https://github.com/tshua/***.git ...
- 小试OKR一季度之后有感分享，你要不要试试ORK？
封面 OKR已经在国内热火朝天有一阵子了,为了适当的赶时髦,从年初开始团队内部小范围使用ORK模式以便测试团队会有什么化学反应.这篇文章打算写写心得感受,供大家围观产考. 老一套先摆一下概念 OKR( ...
- PHP setcookie()用法
定义和用法 setcookie() 函数向客户端发送一个 HTTP cookie. cookie 是由服务器发送到浏览器的变量.cookie 通常是服务器嵌入到用户计算机中的小文本文件.每当计算机通过 ...
- js的语法糖？
++“”里面的+“”默认被变成“0”了 前端多写了个+号导致的bug,网址后面多一个0.虽然不知道是什么原因,但是感觉是js的隐式替换
- 最简实例演示asp.net5中用户认证和授权(1)
asp.net5中,关于用户的认证和授权提供了非常丰富的功能,如果结合ef7的话,可以自动生成相关的数据库表,调用也很方便. 但是,要理解这么一大堆关于认证授权的类,或者想按照自己项目的特定要求对认证 ...
- elasticsearch.yml基本配置说明
一.基本配置 elasticsearch的config文件夹里面有两个配置文 件:elasticsearch.yml和logging.yml,第一个是es的基本配置文件,第二个是日志配置文件,es也是 ...
- Servlet高级部分Filter（过滤器）
一:Filter称之为"过滤器",用在Servlet外,对request和response进行修改.它是AOP(面向切面编程思想的一种体现),Filter中有一个FilterCha ...
- Photoshop之切图
基本(繁琐)操作: 切JPG图(即带背景的图): 1. 选切片工具(另外,切片选择工具能选择切片和删除切片),切 2. 存储为Web所用格式(快捷键Ctrl + Shi ...
- es6-Module 的加载实现
浏览器加载 传统方法 在 HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本. <!-- 页面内嵌的脚本 --> <script type= ...
- mui的ajax例子1
mui.ajax()方法,get请求 前端页面: <!DOCTYPE html><html><head> <meta charset="utf-8& ...