结合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. Gin框架 - 自定义错误处理

    目录 概述 错误处理 自定义错误处理 panic 和 recover 推荐阅读 概述 很多读者在后台向我要 Gin 框架实战系列的 Demo 源码,在这里再说明一下,源码我都更新到 GitHub 上, ...

  2. STL 优先队列 用法

    今天做题用到了优先队列 对它的用法还不是很熟悉 现在整理一下. 需要的库 #include<queue> using namespace std; 不过我都用bits/stdc++.h.. ...

  3. ASP.NET Core Web Api之JWT VS Session VS Cookie(二)

    前言 本文我们来探讨下JWT VS Session的问题,这个问题本没有过多的去思考,看到评论讨论太激烈,就花了一点时间去研究和总结,顺便说一句,这就是写博客的好处,一篇博客写出有的可能是经验积累,有 ...

  4. Oracle JDK与OpenJDK到底有什么不同?

    ​不知道各位developer平时是否有过疑问,Oracle JDK是什么,OpenJDK又是什么? Oracle JDK便是平常我们在windows系统上做开发使用的JDK,又称作SUN JDK.O ...

  5. 微信小程序 「柒留言」 — 实现微信公众号留言功能(限时免费入驻,建议收藏)

    「柒留言」小程序留言助手使用指南(接近原生界面) 前言 从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...

  6. Web Worker 多线程

    Web Workers多线程 1  浏览器把所有事件都通过操作系统安排到事件队列中(例如:你去一个·窗口买菜,需要排队):浏览器使用单线程处理队列中的事件和执行用户代码(也就是单线程:web work ...

  7. 【iOS】no identity found Command /usr/bin/codesign failed with exit code 1

    今天遇到了这个问题,详情如下图: 后来发现是自己脑子短路了……只添加了 Provisioning Profiles, 而忘记添加 Certificates, 就是下面的两个:

  8. 工业物联网网关在线探测之TraceRoute

    佰马工业物联网网关BMG500在线探测通常有Ping.DNS.TraceRoute三种技术方式,这三种方式的区别与联系是什么?本文着重介绍工业物联网网关在线探测的工作原理,以图文形式介绍无线网关在线探 ...

  9. PYNQ上手笔记 | ① 启动Pynq

    现在人工智能非常火爆,一般的教程都是为博硕生准备的,太难看懂了,分享一个非常适合小白入门的教程,不仅通俗易懂而且还很风趣幽默,点☞这里​​​​​​​☜进入传送门~ = = = = 我是华丽的分割线 = ...

  10. Jmeter 接口测试参数处理

    问题: 一.签名参数sign算法由文字描述,算法需自己编写 二. 参数param_json为变化的json串(json串内订单号唯一) 解决: 一. 签名sign: 1. 手动拼接后在https:// ...