vue结合element-ui做简单版todolist
结合element-ui首先需要npm安装element-ui
npm i element-ui -S;
然后在入口文件中引入;

<template> <!-- 编写简单小功能 --> <div class="demo"> <!-- 在element-ui中选择相应的模块,然后复制进来,如果不需要结合element-ui的话,把前面的el-去掉即可--> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label"> </el-option> </el-select> <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> <el-button type="primary" icon="el-icon-plus" circle @click="add"></el-button> <div class="radio_select"> <span>是否标红</span> <el-radio v-model="radio" label="1">是</el-radio> <el-radio v-model="radio" label="2">否</el-radio> </div> <ul> <!-- 可以使用以下两种方式,个人喜欢绑定class; 动态绑定class :class="item.red==1?'changered':''" 动态绑定样式 :style="{'color':item.red==1?'red':''}" --> <li v-for="(item,index) in list" :key="index" :class="item.red==1?'changered':''"> <!-- li遍历list,得到点击add按钮后输入框/选择框/单选中的值然后进行渲染 标红通过三目运算符判断添加class名; --> {{item.data}} --- {{item.red}} ---{{item.selected}} <!-- 样式比较丑,可以自己改变 --> <el-button type="primary" icon="el-icon-close" circle @click="reduce(index)"></el-button> </li> </ul> </div> </template> <script> export default { data() { return { input: "", //输入框的值; list: [], //存数据 radio: "2", //默认单选按钮在否上 options: [ //下拉中的选项; { label: "黄金糕" }, { label: "双皮奶" }, { label: "蚵仔煎" }, { label: "龙须面" }, { label: "北京烤鸭" } ], value: "" }; }, methods: { add() { //添加功能 //把所有的值放到list里面; this.list.push({ data: this.input, red: this.radio, selected: this.value }); // 清空为原始状态 this.input = ""; this.value="", this.radio="2" }, reduce(index) { //删除功能。利用splice截取实现删除功能; this.list.splice(index, 1); } } }; </script> <style> /* 样式随便写的,除最后一个可全部删除 */ img{ width: 200px; min-height: 350px; border: 1px solid #ddd; margin-left:200px; margin-top: 200px; } .demo { width: 100%; height: 100%; } .demo .el-select { width: 15%; } .demo .el-select .el-input { width: 90%; } .demo .el-input { width: 20%; margin-right: 20px; } .demo .radio_select { margin: 20px 0 0 50px; } .changered { /* 标红的样式 */ color: red; } </style>
vue结合element-ui做简单版todolist的更多相关文章
- vue用mand-mobile ui做交易所移动版实战示例
vue用mand-mobile ui做交易所移动版实战示例 先展示几个界面: 目录结构: main.js // The Vue build version to load with the `impo ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- 第五十三篇:Vue安装Element ui
好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- VUE+Element UI实现简单的表格行内编辑效果
原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...
随机推荐
- Gin框架 - 自定义错误处理
目录 概述 错误处理 自定义错误处理 panic 和 recover 推荐阅读 概述 很多读者在后台向我要 Gin 框架实战系列的 Demo 源码,在这里再说明一下,源码我都更新到 GitHub 上, ...
- STL 优先队列 用法
今天做题用到了优先队列 对它的用法还不是很熟悉 现在整理一下. 需要的库 #include<queue> using namespace std; 不过我都用bits/stdc++.h.. ...
- ASP.NET Core Web Api之JWT VS Session VS Cookie(二)
前言 本文我们来探讨下JWT VS Session的问题,这个问题本没有过多的去思考,看到评论讨论太激烈,就花了一点时间去研究和总结,顺便说一句,这就是写博客的好处,一篇博客写出有的可能是经验积累,有 ...
- Oracle JDK与OpenJDK到底有什么不同?
不知道各位developer平时是否有过疑问,Oracle JDK是什么,OpenJDK又是什么? Oracle JDK便是平常我们在windows系统上做开发使用的JDK,又称作SUN JDK.O ...
- 微信小程序 「柒留言」 — 实现微信公众号留言功能(限时免费入驻,建议收藏)
「柒留言」小程序留言助手使用指南(接近原生界面) 前言 从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...
- Web Worker 多线程
Web Workers多线程 1 浏览器把所有事件都通过操作系统安排到事件队列中(例如:你去一个·窗口买菜,需要排队):浏览器使用单线程处理队列中的事件和执行用户代码(也就是单线程:web work ...
- 【iOS】no identity found Command /usr/bin/codesign failed with exit code 1
今天遇到了这个问题,详情如下图: 后来发现是自己脑子短路了……只添加了 Provisioning Profiles, 而忘记添加 Certificates, 就是下面的两个:
- 工业物联网网关在线探测之TraceRoute
佰马工业物联网网关BMG500在线探测通常有Ping.DNS.TraceRoute三种技术方式,这三种方式的区别与联系是什么?本文着重介绍工业物联网网关在线探测的工作原理,以图文形式介绍无线网关在线探 ...
- PYNQ上手笔记 | ① 启动Pynq
现在人工智能非常火爆,一般的教程都是为博硕生准备的,太难看懂了,分享一个非常适合小白入门的教程,不仅通俗易懂而且还很风趣幽默,点☞这里☜进入传送门~ = = = = 我是华丽的分割线 = ...
- Jmeter 接口测试参数处理
问题: 一.签名参数sign算法由文字描述,算法需自己编写 二. 参数param_json为变化的json串(json串内订单号唯一) 解决: 一. 签名sign: 1. 手动拼接后在https:// ...