element-ui + vue 简易留言板

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element-ui + vue 简易留言板相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>留言板</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>

<body>
    <div id="messageboard">
        <el-form ref="form" label-width="50px">
            <el-form-item label="标题">
                <el-input v-model="title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="content" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="add()">添加</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
            <el-table border :data="mydata">
                <el-table-column label="编号" inline-template :context="_self">
                    <span>{{$index+1}}</span>
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="content" label="内容">
                </el-table-column>
                <el-table-column label="操作" inline-template :context="_self">
                    <span><el-button size="small" @click="showDialog()">删除</el-button></span>
                </el-table-column>
            </el-table>
            <div style="text-align:right" v-show="mydata.length>0">
                <el-button size="small" @click="showDelallDialog()">全部删除</el-button>
            </div>
        </el-form>

        <el-dialog title="提示" v-model="dialogVisible" size="tiny">
            <span v-if="nowIndex==-2">删除全部条留言</span>
            <span v-else>删除此条留言</span>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="del(nowIndex)" >确 定</el-button>
        </span>
        </el-dialog>
    </div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: ‘#messageboard‘,
        data: function() {
            return {
                title: ‘‘,
                content: ‘‘,
                mydata: [],
                dialogVisible: false,
                nowIndex: -100,
            }
        },
        methods: {
            add() {
                if (this.title == ‘‘ || this.content == ‘‘) {
                    this.$message.error(‘请填写完整‘);
                } else {
                    this.mydata.push({
                        title: this.title,
                        content: this.content,
                    });
                    this.title = ‘‘;
                    this.content = ‘‘;
                }
            },
            showDialog() {
                this.dialogVisible = true;
            },
            showDelallDialog() {
                this.dialogVisible = true;
                this.nowIndex = -2;
            },
            del(n) {
                if (n == -2) {
                    this.mydata = [];
                } else {
                    this.mydata.splice(n, 1);
                }
                this.nowIndex = -100;
                this.dialogVisible = false;
            },
            handleReset() {
                this.title = ‘‘;
                this.content = ‘‘;
            }
        },
    })
</script>

</html>

　　

以上是关于element-ui + vue 简易留言板的主要内容，如果未能解决你的问题，请参考以下文章

vue.js介绍，常用指令，事件，以及制作简易留言版

无需美工，使用Vue + Element-ui 搭建一款简易的手机Web页面框架

vue实现简易留言板

Laravel + Vue + element-ui 前端项目一 留言评论 7

vue简易留言板

530 vue 一个基础语法的汇总范例 (简易留言板)