vue结合element-ui做简单版todolist

Posted 2022-09-07 sy11112027

 结合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>