按钮 | 易学教程

Vue基础篇--8组件基础 component

阅读更多关于 Vue基础篇--8组件基础 component

Vue基础篇--8组件基础 component 1.简单示例 <div id='components1'> <button-conter></button-conter> </div> <script> // 定义一个名为button-conter组件 Vue.component("button-conter",{ data:function () { return { count:0 } }, template:`<button v-on:click="count++">You clicked me {{count}}</button>` }); // 创建一个根实例 new Vue({el:"#components1"}) </script> 组件是可以复用的，这样你在 id='components1' 的作用域中再定义 <button-conter></button-conter> 也是可以的，并且它们彼此之间互不影响。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data 、 computed 、 watch 、 methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。 2.组件的复用你可以将组件进行任意次数的复用： <div id="components-demo"> <button-counter><

Vue基础篇--6事件处理

阅读更多关于 Vue基础篇--6事件处理

Vue基础篇--6事件处理 1.监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例 <div id="exp"> <button v-on:click="count +=1">add 1</button> <p>The button above has been clicked {{count}} times.</p> </div> new Vue({ el:"#exp", data:{ count:0 } }) 2.事件处理方法然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。 <div id="exp"> <button v-on:click="greet">add 1</button> <p>The button above has been clicked {{count}} times.</p> </div> new Vue({ el:"#exp", data:{ count:0 }, methods:{ greet:function (event) { console.log(event); this.count++ } } }) 3.内联处理器中方法除了直接绑定到一个方法，也可以在内联 JavaScript

记录react+antd项目中关于Table中使用Button实现点击某行禁用效果及Popconfirm踩坑

阅读更多关于记录react+antd项目中关于Table中使用Button实现点击某行禁用效果及Popconfirm踩坑

一、首先使用点击Button弹出Popconfirm，再点击确定来控制disabled属性的true或者false，控制disabled属性通过控制一个变量就可以了。 1.首先看一下Popconfirm及Button的使用 < Popconfirm title = "是否确认？" onConfirm = { ( e ) => { this . confirm ( record ) } } //点击确认的回调 onCancel = { this . cancel } //点击取消的回调 okText = "确定" cancelText = "取消" // disabled={data.isDisabled} disabled = { record . isDisabled } > < Button disabled = { record . isDisabled } type = "primary" size = 'small' style = { { marginRight : '10px' } } onClick = { this . handleChange . bind ( this , record ) } > 按钮 < / Button > < / Popconfirm > 2.通过循环遍历给每一条数据加一个变量(如果后端返回的数据有这个变量的话，请忽略此步骤) for

ExtJs4 笔记（5） Ext.Button 按钮

阅读更多关于 ExtJs4 笔记（5） Ext.Button 按钮

《回到系列目录从本篇开始讲基础控件，ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮，下拉选项式按钮和按钮组合等。我们先看看效果图: 预览如下是用到的html： [html] <h1> 三种方式实现事件： </h1> <div id="div1" class="content"> <ul> <li id="li1"></li> <li id="li2"></li> <li id="li3"></li> </ul> </div> <h1> 带图标菜单： </h1> <div id="div2" class="content"> </div> <h1> 带分割线的按钮</h1> <div id="div3" class="content"> </div> <h1> 菜单式按钮</h1> <div id="div4" class="content"> </div> <h1> 按钮组合</h1> <div id="div5" class="content"> </div> 一、基本按钮，三种方式实现按钮事件这里介绍了最基本的按钮生成代码，第一个按钮具备弹起和按下两种状态，三个按钮分别别设置成三种大小。每个按钮的单击事件都是通过一种新的实现方式。下面看看Js代码： [Js] Ext.create("Ext

基于Vue的人力资源管理平台（利用模态框修改数据）

阅读更多关于基于Vue的人力资源管理平台（利用模态框修改数据）

HTML部分： <!doctype html> <html lang="zh"> <head> <title>Vue利用模态框修改数据</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <script src="D:\WebCode\Vue.js"></script>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body>   <div id="app" class="container-fluid">

React Hooks 一步到位

阅读更多关于 React Hooks 一步到位

useState 用来声明状态变量。 import React, { useState } from 'react'; // ... const [ count , setCount ] = useState(0); // ... count 声明的变量 setCount 设用来更新变量的函数 0 初始值多个状态声明不能出现在条件判断语句中 useEffect 用来代替生命周期函数。 import React, { useEffect } from 'react'; useEffect(()=>{ // some code }) 第一次组件渲染和每次组件更新都会执行这个函数 useEffect中的函数的执行不会阻碍浏览器更新视图，这些函数是异步的使用 useEffect 实现类似 componentWillUnmount useEffect(()=>{ return () => { // some code } }) 返回一个函数实现解绑但是这样会导致每次状态发生变化，useEffect 都进行解绑 useEffect(()=>{ return () => { // some code } }, []) 使用第二个参数，制定哪些状态发生变化时再解绑 useContext 跨越组件层级直接传递变量，实现状态共享。 useContext 解决的是组件之间值传递的问题 redux

基于Vue的人力资源管理平台（原表格中修改数据）

阅读更多关于基于Vue的人力资源管理平台（原表格中修改数据）

Html部分： <!doctype html> <html lang="zh"> <head> <title>Vue在原表格中修改数据</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <script src="D:\WebCode\Vue.js"></script>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body>   <div id="app" class="container-fluid">

带表单功能的日历，可插入内容的日历

阅读更多关于带表单功能的日历，可插入内容的日历

自从接触了前端日历和日期部分的功能后，我发现网上使用js操作日历的插件真不多，非常好的也就极个别，代码良莠不齐，js对日期操作相比其它语言极其的不友好，如果做个日历，里面附带预约表单，这种功能就非常头疼了，然而这又很常见，比如预约挂号系统，这是很常见的。一、JavaScript实现的繁琐性如果你是个前端狂人，那么给你一天半天时间，你开发一个日历的插件应该不觉得有什么，为了快速精确的开发完整的功能，想要时间短，准确率高，还需要借助后台程序，例如php。php做日历简直太简单了，做为一个前端不由得点个赞！二、一个实现自由预约功能的demo 地址： http://chen.web2014.cn/zzz/tj... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml&... <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src=" http:/

【Android基础】UI控件

阅读更多关于【Android基础】UI控件

一、TextView 1、常用属性属性描述 android:text 显示内容 android:textSize 显示内容的字体大小，sp android:textColor 显示内容的颜色 android:lines 初始显示的行数 android:maxLines 最大显示的行数 android:ellipsize 字过长不想换行，可以使用省略号，此值表示省略号的位置 android:autoLink 设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web /email/phone/map/all) 二、Button Button继承自TextView,他主要是在界面生产一个按钮，默认可点击。当点击按钮时，会触发一个onClick事件。可以为按钮设计图片。通过设计background属性来为Button添加背景图片三、EditText EditText控件与TextView控件非常相似。EditText相比TextView的最大变化是可以接受用户的输入，可以说它是用户和安卓应用进行数据传输窗户，有了它就等于有了一扇和安卓应用传输的门，通过它用户可以把数据传给安卓应用，然后得到我们想要的数据。 1、常用属性属性描述 android:hint 提示文字 android:textColorHint 提示文字的颜色

[PYQT5] 主窗口弹出子窗口

阅读更多关于 [PYQT5] 主窗口弹出子窗口

需求：在PYQT5中，点击主窗口中的按钮，弹出子窗口。测试代码：例1：在主窗口添加按钮，并把按钮信号关联槽，在槽函数中创建子窗口对象赋值到普通变量，并调用其 show 方法。 from PyQt5.QtWidgets import * import sys class Main(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle("主窗口") button = QPushButton("弹出子窗", self) button.clicked.connect(self.show_child) def show_child(self): child_window = Child() child_window.show() class Child(QWidget): def __init__(self): super().__init__() self.setWindowTitle("我是子窗口啊") # 运行主窗口 if __name__ == "__main__": app = QApplication(sys.argv) window = Main() window.show() sys.exit(app.exec_()) 运行结果：该段代码运行后，点击主窗口中的按钮

订阅按钮