按钮

当子组件需要向父组件传递数据时，就要用到自定义组件。 父组件也可以直接在子组件的自定义标签上使用v-once来监听子组件触发的自定义事件。 <div id="app"> <p>总数：{{total}}</p> <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component> </div> <script> Vue.component("my-component",{ template:`<div> <button @click="handleIncrease">+1</button> <button @click="handleReduce">-1</button> </div>`, data(){ return{ counter:0 } }, methods:{ handleIncrease(){ this.counter++; this.$emit("increase",this.counter) }, handleReduce(){ this.counter--; this.$emit("reduce",this.counter) } } }); new Vue({ el:"#app", data:{ counter:0 }, methods:{ handleGetTotal

2020-03-13 每日一例第5天 1.添加按钮1和label、textbox控件,并修改相应的text值； 2.修改textBox1的TextChanged事件并输入代码； button1.Text = textBox1.Text;//赋值button文本 button1.AutoSize = true;//button自动尺寸设置自动变动 3.例题完成，最后效果如下： 来源： https://www.cnblogs.com/ljs7490/p/12484010.html

js 复制文本的四种方式 一、总结 一句话总结：js文本复制主流方法：document的execCommand方法 二、js 复制文本的四种方式 纯 转载复制，非原创 原地址：http://www.cnblogs.com/xhyu/p/5370111.html 目前copy主流有四种方式： ZeroClipboard ， Clipboard.js ， execCommand ，setData，再就是其他只支持IE的鸡肋法了不在此讨论。。 概况： ZeroClipboard 就是常说的Flash法，通过加载一个Flash，让其访问系统剪贴板来绕过绝大多数系统的权限限制，然而体积稍微庞大些 Clipboard.js 近几年使用较多，体积相对小，兼容性可以接受，使用还比较方便。 execCommand 新兴势力，safari等主流正在努力兼容，是个好东西。 setData 太老。。一般不太用，基本只适合IE 兼容性： ZeroClipboard 兼容性最好，能全面兼容chrome/ FireFox/ IE/ 甚至Safari 这种“友好”的浏览器 Clipboard.js和execCommand兼容性相似，兼容chrome/ FF/ IE>9/ Safari新版（不太懂Safari版本号如何算。。感觉15年以后的都可以） setData 仅IE 体积： ZeroClipboard

转载来源： https://www.cnblogs.com/goodborder/p/5843050.html 在前台页面开发中有时候我们会需要一些比较酷的效果，这个时候使用JQuery中的动画来实现便显得非常的简单。 最近在工作中碰到了一个页面元素移动的效果，这是个简单的页面效果也非常容易实现。 在使用中用到了一个停止动画的方法"stop()"，以前只是用也没有过多的关注。 这几天再次碰到，便翻开文档测试了一番，竟也有了一些新的认识。对这个方法有了全新的了解，在这里把我的测试记录下来。 在JQuery文档中对这个方法的解释是这样的： 一、概述 停止所有在指定元素上正在运行的动画。 如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行。 二、没有参数 场景模拟 假设有一个元素需要在背景中进行移动，然后回到起始位置。页面中有三个按钮，分别负责“开始移动”，“采用了stop方法的回归”，“没有采用stop方法的回归”。 整体页面效果图如下： 测试代码和效果 <script type="text/javascript"> $(function () { //向右移动600px $("#Button1").click(function () { $("#move").stop().animate({ left: 610 }, 3000); }); /

Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合，能让开发人员快速轻松的构建直观的界面并且不用担心在较小的设备上响应的具体细节。 Bootstrap 栅格（Grid）系统 在移动互联网的今天，越来越多的网站被手机设备访问，移动流量在近几年猛增。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 栅格参数 Bootstrap 3提供了一系列的预定义class来指定列的尺寸，如下所示： Bootstrap 栅格系统被分割为12列，当布局你的网页时，记住所有列的总和应该是12。为了图示，请看如下HTML所示： <div class="container"> <div class="row"> <div class="col-md-3" style="background-color: green;"> <h3>green</h3> </div> <div class="col-md-6" style="background-color: red;"> <h3>red</h3> </div> <div class="col-md-3" style="background-color:

所谓双向绑定：就是改变modle，就会改变view，改变view，也会改变modle 下面案例，点击getMthod(),获取msg的内容，在点击setMthod()改变msg的内容，你会发现H1的值也会进行改变 <template> <div id="app"> <h1>{{ msg }}</h1> <!-- input获取msg的内容，modle的值赋予给view，改变view的值就会更改model的内容， --> <input type="text" v-model="msg"/> <button v-on:click="getMthod()">点击我有效果</button> <button v-on:click="setMthod()">改变view的值</button> <hr> <br> <!-- 使用ref获取表单数据,ref 相当于是一个表达 --> <input type="text" ref="userinfo"/> <br> <div ref="box"> 我是一个颜色</div> <button v-on:click="gettwoframe()">获取第二个表单数据</button> </div> </template> <script> /* 双向数据绑定，用于表单, */ export default { name: 'app', data () {

< form id= "fileupload" action= "/rest/pic/upload" method= "POST" enctype= "multipart/form-data" > <!-- Redirect browsers with JavaScript disabled to the origin page --> < noscript > < input type= "hidden" name= "redirect" value= "https://blueimp.github.io/jQuery-File-Upload/" > </ noscript > <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> < div class= "row fileupload-buttonbar" > < div class= "col-lg-7" > <!-- The fileinput-button span is used to style the file input field as button --> < span class= "btn btn-success fileinput-button" > < i

今天遇到了一个用手机号注册需要发送验证码的需要，因为发送验证码需要一个间隔时间，也就第一次发过之后多少秒之后才可以让用户在次点击发送，也防止别人恶意点击。这样就需要一个倒计时的来显示时间。从网上爬了一会代码感觉这种方法很好用，也不需要自己开线程和handler什么的了。 查看了一下官方文档，这个类及其简单，只有四个方法，上面都涉及到了onTick，onFinsh、cancel和start。其中前面两个是抽象方法，所以要重写一下。 下面是官方给的一个小例子： 1 new CountdownTimer(30000, 1000) { 2 public void onTick(long millisUntilFinished) { 3 mTextField.setText("seconds remaining: " + millisUntilFinished / 1000); 4 } 5 public void onFinish() { 6 mTextField.setText("done!"); 7 } 8 }.start(); 自己做了个获取验证码的小demo: 先上效果图： 下面是代码： 1 public class MainActivity extends Activity 2 { 3 private Button button; 4 @Override 5 protected

-------------------------------------------思想是行动的先导，心理问题直接作用并影响人的思想。 知识预览 bootstrap简介 CSS栅格系统 四 表格 表单 回到顶部 bootstrap简介 http://v3.bootcss.com/ Bootstrap优点： 下载： Bootstrap引入 1 2 3 4 < meta name="viewport" content="width=device-width, initial-scale=1"> < link href="dist/css/bootstrap.min.css" rel="stylesheet"> < script type="application/javascript" src="dist/jquery-3.1.1.js"></ script > < script type="application/javascript" src="dist/js/bootstrap.min.js"> 回到顶部 CSS栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

Bootstrap自带的那些常用插件。 模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。 HTML代码： <!-- 触发模态框的按钮 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- 模态框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class=