vue结合element-ui做简单版todolist

最新推荐文章于 2025-05-03 17:46:10 发布

「已注销」

最新推荐文章于 2025-05-03 17:46:10 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/clear_code/article/details/101621535

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何将Vue与Element-UI结合，通过npm安装并引入Element-UI，实现一个基础的TodoList应用。虽然样式简单，但核心功能已经实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结合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了，如果不用可以忽略这一步；

由于代码中有详细注释
效果如下：（样式没有写，比较丑，见谅哈）
在这里插入图片描述


```javascript
<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>