码迷,mamicode.com
首页 > 其他好文 > 详细

vue结合element-ui做简单版todolist

时间:2019-08-29 14:02:22      阅读:400      评论:0      收藏:0      [点我收藏+]

标签:primary   span   com   pre   demo   push   dem   sel   todo   

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

标签:primary   span   com   pre   demo   push   dem   sel   todo   

原文地址:https://www.cnblogs.com/sy11112027/p/11428957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!