Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮
 
具体效果图如下:

点击后会变成这样:

首先我们需要下载vue.js:https://vuejs.org/js/vue.min.js
将网页内的内容全选粘贴至js文件中
 
然后我们先创建一个html文件
在body创建一个按钮具体代码如下:
<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之小小动态按钮的更多相关文章

  1. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  2. Atitit 动态按钮图片背景颜色与文字组合解决方案

    Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...

  3. android Button 切换背景,实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  4. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  5. VS2010,MFC动态按钮和窗体背景图片,以及是静态文字控件透明,并避免静态文字刷新出现的重叠问题

    1.动态按钮的四种动作 1)正常 2)按下 3)滑过 4)失效 在MFC中,4个动作对应着四种位图bmp, 首先,将代表四种状态的位图加载入资源中,将对应的按钮设置为BitmapButton 第二,在 ...

  6. MFC动态按钮的创建及其消息响应(自定义消息)

    动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC_D_BTN 10000 2.在类的OnInitDialog()函数中动态创建按钮(建立按钮对象时最好建立对象的指针 ...

  7. MFC动态按钮的创建及其消息响应 和 自定义消息

    原文链接: http://www.cnblogs.com/gaohongchen01/p/4046525.html 动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC ...

  8. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  9. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

随机推荐

  1. Java学习笔记--字符串和文件IO

    1.Java中的字符串类和字符的表示 2.区分String,StringBuilder和StringBuffer 3.从命令行中给main方法传递参数 4.文件操作 1 Java中的字符串和字符 1. ...

  2. 去除pycharm的波浪线

    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑.这里给大家分 ...

  3. OO 第四单元总结

    一.总结本单元两次作业的框架设计 1.1. 需求分析 通过分析mdj文件可知,两次作业如果对于时间复杂度没有要求,可以不涉及任何数据结构,直接根据读入的UML_ELEMENT逐个分析得到各个函数的结果 ...

  4. js中的load先执行还是Jquery的ready先执行问题

    onload需要页面上所有的资源都加载上之后执行,而ready则是DOM文档树已经解析完成时,说ready比onload快最显著的是比如一个页面上有一个很大的图片,加载要好久,onload只有在图片加 ...

  5. Eucalyptus-instance启动后查看运行状态

    1.前言 在eucalyptus中通过虚拟机模板,创建并启动一个虚拟机,这个时候虚拟机启动正常,但是外部一直无法访问也ping不通,正对这种情况我们如何检查排除问题呢? 两种检查问题的方法: 1).在 ...

  6. Hadoop之—— WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform...

    [hadoop@hadoop000 hadoop]$ ldd --version ldd (GNU libc) 2.12 Copyright (C) Free Software Foundation, ...

  7. maven+jenkins发布环境

    安装java省略,下面是环境变量 export JAVA_HOME=/usr/java/jdk1.8.0_65/ export PATH=$JAVA_HOME/bin:$PATH export CLA ...

  8. mybatis-分页和缓存

    1.分页 1.1在dao接口中配置分页参数: package com.java1234.mappers; import java.util.List;import java.util.Map; imp ...

  9. pc-要实现相隔一定时间数据排序变化一次

    有时候产品会有这种要求,就是展示的数据三天是正序的,一天是逆序的,解决是: 以某一个时间点为基准点,然后获取当前的时间,然后计算差值,分情况 //专利 JPView : function(Sorder ...

  10. 【洛谷3527】[POI2011] MET-Meteors(树状数组+整体二分)

    点此看题面 大致题意: 一颗星球被分为\(M\)份,分别属于\(N\)个国家,有\(K\)场陨石雨,第\(i\)个国家希望收集\(P_i\)颗陨石,问其至少要在第几次陨石雨后才能达到目标. 关于整体二 ...