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