arpenker
- 浏览: 332073 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (350)
- JAVAEE (155)
- Gwt (27)
- Android (6)
- TaoBao (0)
- Xiaonei (0)
- Ubuntu (1)
- javafx (1)
- flex (0)
- GAE (2)
- Arcgis (1)
- Extjs (5)
- Dwr (1)
- ExtjsDwrSpring整合 (2)
- ophone (0)
- php (1)
- python (8)
- squid for windows download (1)
- Java (3)
- oracle (1)
- jquery (1)
- 淘宝 (1)
- 人生 (0)
- java项目运行时增加 (1)
- xfire (1)
- jquery mobile (1)
- ES (3)
- logstash (2)
- 8080端口占用 (1)
- 通达信 (1)
- mysql启动故障 (1)
- 微信小程序 (3)
- centos (1)
- redis (1)
- springcloud (1)
- python3.9 (1)
- python2.7 (1)
- ta-lib (0)
- ta-lib，TALIB (1)
- 安装TALIB，CENTOS (1)
- 终端关闭后 (1)
- vi (1)
- 命令行 (1)
- tomcat (2)
- nginx (3)
- linux (2)
- jdk (1)
- 开发环境 (1)
- nodejs (1)
- vs code (1)
- node js 全部版本 (1)
- JAVASCRIPT (1)
- pychar (1)
- mysql (3)
- win10 (1)
- elasticsearch plugin (1)
- vue (10)
- editplus (0)
- clickhouse (6)
- zabbix (1)
- quicktracking (1)
- quiktraking (1)
- talib (1)
- docker (1)
- excel (1)
- bat (1)
最新评论
-
ian_jiang：
不知道 你说了个 什么？
GWT下如何获取到javaee servlet下会话信息 -
心愿：
index.jsp应该建立在哪个目录下
dwr3.0的HELLOWORLD创建过程 -
349446658：
classpath:path是老的指定配置文件路径的方式。升级 ...
升级2 -
349446658：
新版本不是在type中指定first，而是指定1来表示跳到第一 ...
分页错误2 -
349446658：
这是因为后面的版本规范了指定配置文件路径的方式，必须指定为如下 ...
升级错误
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js 搜索页面</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<title>vue操作</title>
<style type="text/css">
[v-cloak] {
display: none
}
table {
border: 1px solid #ccc;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
margin-top: 10px;
width: 100%;
}
table td,
table th {
height: 30px;
border: 1px solid #ccc;
background: #fff;
font-size: 15px;
padding: 3px 3px 3px 8px;
}
table th:first-child {
width: 30px;
}
.container,
.st {
width: 1000px;
margin: 10px auto 0;
font-size: 13px;
font-family: 'Microsoft YaHei'
}
.container .search {
font-size: 15px;
padding: 4px;
}
.container .add {
padding: 5px 15px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
background: rgba(0, 0, 0, 0.7);
}
.overlay td:first-child {
width: 66px;
}
.overlay .con {
position: absolute;
width: 420px;
min-height: 300px;
background: #fff;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
/*margin-top: -150px;*/
padding: 20px;
}
</style>
</head>
<body>
<div class="st">
<h1>vue数据</h1>
<p>返回文章： <a href="http://www.xiabingbao.com/vue/2017/07/10/vue-curd.html">vue</a></p>
</div>
<div class="container" id="app">
<div>
<input type="text" placeholder="search" @input="search" list="cars" class="search">
<datalist id="cars">
<option v-for="item in searchlist" :value="item"></option>
</datalist>
<input type="button" class="add" @click="add" value="新增">
</div>
<div>
<table>
<tr>
<th>id</th>
<th>用户名</th>
<th>邮箱</th>
<th>性别</th>
<th>省份</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tr v-cloak v-for="(item, index) of slist">
<td>{{index+1}}</td>
<td>{{item.username}}</td>
<td>{{item.email}}</td>
<td>{{item.sex}}</td>
<td>{{item.province}}</td>
<td>{{item.hobby.join(' | ')}}</td>
<td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
</tr>
</table>
</div>
<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
</div>
</body>
<script src="Scripts/vue3.js"></script>
<script type="text/javascript">
Vue.component('model', {
props: ['list', 'isactive'],
template: `<div class="overlay" v-show="isactive">
<div class="con">
<h2 class="title">新增 | 修改</h2>
<div class="content">
<table>
<tr>
<td>用户名</td>
<td><input type="text" v-model="modifylist.username"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" v-model="modifylist.email"></td>
</tr>
<tr>
<td>性别</td>
<td>
<label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
<label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
<label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="" id="" v-model="modifylist.province">
<option value="北京市">北京市</option>
<option value="河北省">河北省</option>
<option value="河南省">河南省</option>
<option value="重庆市">重庆市</option>
<option value="广东省">广东省</option>
<option value="辽宁省">辽宁省</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<label><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="插画">插画</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="编程">编程</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
</td>
</tr>
</table>
<p>
<input type="button" @click="changeActive" value="取消">
<input type="button" @click="modify" value="保存">
</p>
</div>
</div>
</div>`,
computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change');
},
modify() {
this.$emit('modify', this.modifylist);
}
}
});
var app = new Vue({
el: '#app',
data: {
isActive: false,
selected: -1,
selectedlist: {},
slist: [],
searchlist: [],
list: [
{
username: 'aaaaa',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
username: 'bbbbb',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
username: 'aaabb',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
},
{
username: 'cccccc',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
username: 'dddddd',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
username: 'eeeee',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
}
]
},
created() {
this.setSlist(this.list);
},
methods: {
// 修改数据
showOverlay(index) {
this.selected = index;
this.selectedlist = this.list[index];
this.changeOverlay();
},
// 点击保存按钮
modify(arr) {
if (this.selected > -1) {
Vue.set(this.list, this.selected, arr);
this.selected = -1;
} else {
this.list.push(arr);
}
this.setSlist(this.list);
this.changeOverlay();
},
add: function () {
this.selectedlist = {
username: '',
email: '',
sex: '男',
province: '北京市',
hobby: []
};
this.isActive = true;
},
// delete list in index location
del(index) {
this.list.splice(index, 1);
this.setSlist(this.list);
},
changeOverlay() {
this.selected = -1;
this.isActive = !this.isActive;
},
// 获取需要渲染到页面中的数据
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
},
// 搜索
search(e) {
var v = e.target.value,
self = this;
self.searchlist = [];
if (v) {
var ss = [];
// 过滤需要的数据
this.list.forEach(function (item) {
if (item.username.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.username) == -1) {
self.searchlist.push(item.username);
}
ss.push(item);
} else if (item.email.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.email) == -1) {
self.searchlist.push(item.email);
}
ss.push(item);
}
});
this.setSlist(ss); // 将过滤后的数据给了slist
} else {
// 没有搜索内容，则展示全部数据
this.setSlist(this.list);
}
}
},
watch: {
}
})
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js 搜索页面</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<title>vue操作</title>
<style type="text/css">
[v-cloak] {
display: none
}
table {
border: 1px solid #ccc;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
margin-top: 10px;
width: 100%;
}
table td,
table th {
height: 30px;
border: 1px solid #ccc;
background: #fff;
font-size: 15px;
padding: 3px 3px 3px 8px;
}
table th:first-child {
width: 30px;
}
.container,
.st {
width: 1000px;
margin: 10px auto 0;
font-size: 13px;
font-family: 'Microsoft YaHei'
}
.container .search {
font-size: 15px;
padding: 4px;
}
.container .add {
padding: 5px 15px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
background: rgba(0, 0, 0, 0.7);
}
.overlay td:first-child {
width: 66px;
}
.overlay .con {
position: absolute;
width: 420px;
min-height: 300px;
background: #fff;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
/*margin-top: -150px;*/
padding: 20px;
}
</style>
</head>
<body>
<div class="st">
<h1>vue数据</h1>
<p>返回文章： <a href="http://www.xiabingbao.com/vue/2017/07/10/vue-curd.html">vue</a></p>
</div>
<div class="container" id="app">
<div>
<input type="text" placeholder="search" @input="search" list="cars" class="search">
<datalist id="cars">
<option v-for="item in searchlist" :value="item"></option>
</datalist>
<input type="button" class="add" @click="add" value="新增">
</div>
<div>
<table>
<tr>
<th>id</th>
<th>用户名</th>
<th>邮箱</th>
<th>性别</th>
<th>省份</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tr v-cloak v-for="(item, index) of slist">
<td>{{index+1}}</td>
<td>{{item.username}}</td>
<td>{{item.email}}</td>
<td>{{item.sex}}</td>
<td>{{item.province}}</td>
<td>{{item.hobby.join(' | ')}}</td>
<td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
</tr>
</table>
</div>
<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
</div>
</body>
<script src="Scripts/vue3.js"></script>
<script type="text/javascript">
Vue.component('model', {
props: ['list', 'isactive'],
template: `<div class="overlay" v-show="isactive">
<div class="con">
<h2 class="title">新增 | 修改</h2>
<div class="content">
<table>
<tr>
<td>用户名</td>
<td><input type="text" v-model="modifylist.username"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" v-model="modifylist.email"></td>
</tr>
<tr>
<td>性别</td>
<td>
<label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
<label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
<label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="" id="" v-model="modifylist.province">
<option value="北京市">北京市</option>
<option value="河北省">河北省</option>
<option value="河南省">河南省</option>
<option value="重庆市">重庆市</option>
<option value="广东省">广东省</option>
<option value="辽宁省">辽宁省</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<label><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="插画">插画</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="编程">编程</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
</td>
</tr>
</table>
<p>
<input type="button" @click="changeActive" value="取消">
<input type="button" @click="modify" value="保存">
</p>
</div>
</div>
</div>`,
computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change');
},
modify() {
this.$emit('modify', this.modifylist);
}
}
});
var app = new Vue({
el: '#app',
data: {
isActive: false,
selected: -1,
selectedlist: {},
slist: [],
searchlist: [],
list: [
{
username: 'aaaaa',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
username: 'bbbbb',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
username: 'aaabb',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
},
{
username: 'cccccc',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
username: 'dddddd',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
username: 'eeeee',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
}
]
},
created() {
this.setSlist(this.list);
},
methods: {
// 修改数据
showOverlay(index) {
this.selected = index;
this.selectedlist = this.list[index];
this.changeOverlay();
},
// 点击保存按钮
modify(arr) {
if (this.selected > -1) {
Vue.set(this.list, this.selected, arr);
this.selected = -1;
} else {
this.list.push(arr);
}
this.setSlist(this.list);
this.changeOverlay();
},
add: function () {
this.selectedlist = {
username: '',
email: '',
sex: '男',
province: '北京市',
hobby: []
};
this.isActive = true;
},
// delete list in index location
del(index) {
this.list.splice(index, 1);
this.setSlist(this.list);
},
changeOverlay() {
this.selected = -1;
this.isActive = !this.isActive;
},
// 获取需要渲染到页面中的数据
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
},
// 搜索
search(e) {
var v = e.target.value,
self = this;
self.searchlist = [];
if (v) {
var ss = [];
// 过滤需要的数据
this.list.forEach(function (item) {
if (item.username.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.username) == -1) {
self.searchlist.push(item.username);
}
ss.push(item);
} else if (item.email.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.email) == -1) {
self.searchlist.push(item.email);
}
ss.push(item);
}
});
this.setSlist(ss); // 将过滤后的数据给了slist
} else {
// 没有搜索内容，则展示全部数据
this.setSlist(this.list);
}
}
},
watch: {
}
})
</script>
</html>
分享到：
发表评论
-
实时界面生成
2022-07-18 20:34 117把代码贴进来 https://www.runoob.com/t ... -
vue内外表弹窗
2022-07-13 21:02 241<!DOCTYPE html> <html ... -
vue的dialog对话传值和编辑
2022-07-13 20:39 1150<!DOCTYPE html> <html ... -
vue在界面上如何写if else逻辑。
2022-07-13 10:25 659<!DOCTYPE html> <html& ... -
vue常用的缩写
2022-07-13 10:20 237v-bind 缩写 Vue.js 为两个最为常用的指令提供了特 ... -
vue调用自定义函数，并且修改其值。
2022-07-13 10:16 655<!DOCTYPE html> <html& ... -
vue对一个json进行取值
2022-07-13 09:44 3728如何使用vue对象，取一个json里各个对象的值。并显示出来。 ... -
vue
2022-07-13 09:36 116亮点：直接在界面里呼叫vue的自定义方法。 调用 时跟js的语 ... -
vue学习笔记
2022-07-13 09:24 651前端语言。 vue.适合人员使用。 <!DOCTYPE ...
相关推荐
Vue形式呈现 基于Vue 3.x，使用JSON Schema快速生成自定义表单配置界面。例子安装npm i vue3-form-render --save vue3 form render依赖于从item.so进行渲染，因此在使用vue3 form render我们需要安装Ant Design of ...
此系统特别设计以满足计算机编程语言，尤其是C语言的教学和测试需求，支持自动试题生成、在线考试、成绩评估等功能，是一个创新的教育技术应用。 二、系统模块说明 前端模块： 使用Vue.js进行开发，确保系统界面的...
自动生成H5页面，一些简单的页面无需前端参与，运营人员自己新建修改即可QQ交流群： 扫码加群：项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint...
支持多渠道对接，支付网关自动路由 已对接`微信`服务商和普通商户接口，支持`V2`和`V3`接口 ... 支付渠道的接口参数配置界面自动化生成 使用`spring security`实现权限管理 前后端分离架构，方便二次开发
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
VUE界面源码参考 由于环境模块过大，所以不附带 初始化安装环境步骤： 1、请将当前目录的yarn.lock 删除 2、在当前目录下打开CMD，输入指令“yarn”回车即可自动安装环境 3、安装好环境包后，在当前目录执行CMD指令...
其他用法看个人需求集成接口自动化测试，可视化管理。集成UI自动化报告，定时任务等（开发中。。。。）最近更新功能增加随机生成个人信息功能，如姓名、身份证号、手机号集成jmeter，可在线管理jmx文件，可直接执行...
Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注...Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA-singlepageapplication)系统。Vu
用户可以随时查看问卷的填写情况和统计分析结果，系统自动生成图表和报告，帮助用户快速了解调查结果并做出决策。 该系统采用Vue.js框架的响应式设计，兼容各种设备和屏幕尺寸，用户可以在PC端、平板电脑和手机上...
5. **考试与评估**：系统支持在线考试功能，包括题库管理、试卷生成、自动评分等。 6. **学习进度跟踪**：系统记录学生的学习进度和成绩，帮助学生了解自己的学习情况。 7. **资源共享**：平台提供资料共享功能，...
3. **自动化考勤设备集成**：系统支持与各类自动化考勤机对接，实现数据的自动同步，减少人工输入的错误和工作量。 4. **统计分析报告**：系统提供丰富的统计和分析功能，帮助管理人员了解学生出勤情况，并生成周期...
3. **校园出入管理**：通过集成门禁系统，实现校园出入的自动化管理，确保追踪到每一位进出校园的人员。 4. **课程与活动安排**：根据疫情情况调整课程表和校园活动，支持在线教学和线下教学的无缝切换。 5. **疫情...
系统具有创建题库、自动生成试卷、在线考试等功能，并可对答卷情况进行管理和统计分析。与其他技术相比，基于SpringBoot+Vue技术框架的试卷系统具有成本低、界面友好、稳定性高、可扩展性强等优点。
2. 库存管理：自动化跟踪库存水平，及时补货，减少浪费。 3. 员工排班：简化员工排班流程，提高人力资源效率。 4. 销售分析：收集并分析销售数据，帮助制定营销策略和优化菜单配置。 5. 客户关系管理：维护顾客信息...
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
2. 图片渲染：将生成的验证码字符以扭曲、旋转、添加噪点等手段进行渲染，以防止自动化工具的识别。 3. 会话管理：在用户会话期间存储正确的验证码答案，并在用户提交表单时进行核对。 4. 用户界面：为用户提供一...
这里给大家介绍 Django 框架的主要特点，其他一些小优点，读者在学习过程中会慢慢体会： 基于 Python 语言及 MVC 模式，具有...内置了一个可视化的、自动化管理员界面（Admin Site），其类似于一个 CMS 系统（内容管理
最新SSM项目基于Java Web的高校学生课堂考勤系统的设计与实现Vue.zip是为高等教育机构、大学讲师以及学生管理团队设计的自动化考勤管理系统。该项目以Spring Spring MVC MyBatis作为后端技术架构，并结合前端Vue.js...
因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,’para’,’value’),其中data为Vue创建时传输的data对象名,后面两个参数分别...
基于SSM(Spring+SpringMVC+MyBatis)和Vue.js的果蔬经营平台系统是一个面向果蔬批发商和零售商的电子商务平台，旨在帮助果蔬经营者实现销售、采购、库存等业务流程的自动化管理。 该平台系统包含以下模块： 基础...