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 ...
随机推荐
- Spring 自动生成getter和setter方法 tostring方法
添加maven依赖 <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok --> <dependency& ...
- 巧力避免ViewPager的预加载数据,Tablayout+Fragment+viewPager
问题描述 最近在进行一个项目的开发,其中使用到了Tablayout+Fragment+viewPager来搭建一个基本的框架,从而出现了设置数据适配器的时候,item的位置错乱问题.我打印log日志的 ...
- 2019牛客多校第二场H-Second Large Rectangle
Second Large Rectangle 题目传送门 解题思路 先求出每个点上的高,再利用单调栈分别求出每个点左右两边第一个高小于自己的位置,从而而得出最后一个大于等于自己的位置,进而求出自己的位 ...
- 【SVN】SVN使用教程总结
SVN使用教程总结 SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subve ...
- jdk1.8HashMap底层数据结构:散列表+链表+红黑树,jdk1.8HashMap数据结构图解+源码说明
一.前言 本文由jdk1.8源码整理而得,附自制jdk1.8底层数据结构图,并截取部分源码加以说明结构关系. 二.jdk1.8 HashMap底层数据结构图 三.源码 1.散列表(Hash table ...
- .NET Core on K8S学习实践系列文章索引(Draft版)
一.关于这个系列 自从去年(2018年)底离开工作了3年的M公司加入X公司之后,开始了ASP.NET Core的实践,包括微服务架构与容器化等等.我们的实践是渐进的,当我们的微服务数量到了一定值时,发 ...
- hdoj 4715 Difference Between Primes 素数筛选+二分查找
#include <string.h> #include <stdio.h> const int maxn = 1000006; bool vis[1000006]; int ...
- POJ18060
Currency Exchange Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 16244 Accepted: 565 ...
- 【Java笔记】【Java核心技术卷1】chapter3 D2注释
package chapter3; /** * 文档注释 *@author lp *@version 1 **/ public class D2注释 { //单行注释 /* 长注释 */ }
- alluxio2.0特性-预览
项目地址 https://github.com/Alluxio/alluxio/tree/branch-2.0-preview 2.0版本-构思和设计 支持超大规模数据工作负载 Alluxio作为计算 ...