结合element-ui首先需要npm安装element-ui

  npm i element-ui -S;

然后在入口文件中引入;

  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);
这样就可以使用element-ui了,如果不用刻意忽略这一步;
 
由于代码中有注释,所以就不解释了,有兴趣可以看下代码,
效果如下:(比较丑,主要看功能吧。。)

<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的更多相关文章

  1. vue用mand-mobile ui做交易所移动版实战示例

    vue用mand-mobile ui做交易所移动版实战示例 先展示几个界面: 目录结构: main.js // The Vue build version to load with the `impo ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  4. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  5. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  6. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  7. 第五十三篇:Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

  8. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  9. VUE+Element UI实现简单的表格行内编辑效果

    原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...

随机推荐

  1. Spring 自动生成getter和setter方法 tostring方法

    添加maven依赖 <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok --> <dependency& ...

  2. 巧力避免ViewPager的预加载数据,Tablayout+Fragment+viewPager

    问题描述 最近在进行一个项目的开发,其中使用到了Tablayout+Fragment+viewPager来搭建一个基本的框架,从而出现了设置数据适配器的时候,item的位置错乱问题.我打印log日志的 ...

  3. 2019牛客多校第二场H-Second Large Rectangle

    Second Large Rectangle 题目传送门 解题思路 先求出每个点上的高,再利用单调栈分别求出每个点左右两边第一个高小于自己的位置,从而而得出最后一个大于等于自己的位置,进而求出自己的位 ...

  4. 【SVN】SVN使用教程总结

    SVN使用教程总结 SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subve ...

  5. jdk1.8HashMap底层数据结构:散列表+链表+红黑树,jdk1.8HashMap数据结构图解+源码说明

    一.前言 本文由jdk1.8源码整理而得,附自制jdk1.8底层数据结构图,并截取部分源码加以说明结构关系. 二.jdk1.8 HashMap底层数据结构图 三.源码 1.散列表(Hash table ...

  6. .NET Core on K8S学习实践系列文章索引(Draft版)

    一.关于这个系列 自从去年(2018年)底离开工作了3年的M公司加入X公司之后,开始了ASP.NET Core的实践,包括微服务架构与容器化等等.我们的实践是渐进的,当我们的微服务数量到了一定值时,发 ...

  7. hdoj 4715 Difference Between Primes 素数筛选+二分查找

    #include <string.h> #include <stdio.h> const int maxn = 1000006; bool vis[1000006]; int ...

  8. POJ18060

    Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16244   Accepted: 565 ...

  9. 【Java笔记】【Java核心技术卷1】chapter3 D2注释

    package chapter3; /** * 文档注释 *@author lp *@version 1 **/ public class D2注释 { //单行注释 /* 长注释 */ }

  10. alluxio2.0特性-预览

    项目地址 https://github.com/Alluxio/alluxio/tree/branch-2.0-preview 2.0版本-构思和设计 支持超大规模数据工作负载 Alluxio作为计算 ...