不再犹豫
分享是一种美德

Vue实例-本地留言板

好久没有写新的笔记了,今天回想了一下之前学习的Vue知识,现在复习一遍,写写学习事的实例并加以修改一下:

本地记事本:

本地简单的留言板功能,后期其实可以添加盖楼功能的,但是目前先不考虑,大家也可以自己试着添加一下,后期我更新后会同步代码!

1、主要功能

(1)添加留言

(2)删除留言

(3)留言统计及删除

2、主要知识点:

(1)监听事件—–v-on/@

(2)list—–v-for

(3)数据绑定—–v-model

(4)v-show

在线演示

代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta name="robots" content="noindex, nofollow" />

    <meta name="googlebot" content="noindex, nofollow" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>本地留言板</title>

    <link rel="stylesheet" type="text/css" href="./css/index.css" />

</head>

<body>

    <section id="app">

        <!-- 输入框 -->

        <header class="header">

            <h1>本地留言板</h1>

            <input v-model="temp.name" autofocus="autofocus" autocomplete="off" placeholder="请输入昵称"

              class="new-todo" />

              <input v-model="temp.text" autofocus="autofocus" autocomplete="off" placeholder="请输入留言内容"

                class="new-todo" />

                <button class="textbtn textbtn-red" @click="add">提交</button>

        </header>

        

        <!-- 记事本内容列表 -->

        <section class="main">

            <ul class="todo-list">

              <li class="todo" v-for="(item,index) in list">

                <div class="view">

                  <span class="index">{{ index+1 }}.</span>

                  <label>昵称:<span style="color: red;">{{ item.name }}</span></label>

                  <label>留言内容:<span style="color:blue">{{ item.text }}</span></label>

                  <label>留言时间: <span style="color:green">{{ item.time }}</span></label>

                  <button class="destroy" @click="remove(index)"></button>

                </div>

              </li>

            </ul>

        </section>

        <!-- 记事本统计信息 -->

        <footer class="footer" v-show="list.length!=0">

            <span class="todo-count" v-if="list.length!=0">

              <strong>{{ list.length }}</strong> items left

            </span>

            <button v-show="list.length!=0" class="clear-completed" @click="clear">

              Clear

            </button>

        </footer>

    </section>

    <!-- 底部 -->

    <footer class="info">

      <p>技术支持:

        <a href="http://www.mrnaas.com/" target="_blank" style="color: red;">MN乐享</a>

      </p>

    </footer>

    <script src="utils/vue.js"></script>

    <script src="utils/index.js"></script>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                temp:{

                    name:null,

                    text:null

                },

                list: []

            },

            methods: {

                add: function () {

                    let time = parseTime(Date())

                    let obj = JSON.parse(JSON.stringify(this.temp))//为了防止错误发生,采用深拷贝

                    if(obj.name && obj.text){

                        obj.time = time

                        this.list.push(obj);

                    }else{

                        alert("留言昵称/留言内容必填!")

                    }

                },

                remove: function (index) {

                    console.log("删除");

                    console.log(index);

                    this.list.splice(index, 1);

                },

                clear: function () {

                    this.list = [];

                }

            }

        })

    </script>

</body>

</html>

 

链接: https://pan.baidu.com/s/1fMgOHYz79emhehgaxNV-aA

提取码获取方法:

关注公众号发送:【留言板】

GitHub

https://github.com/twang211/webdemo

赞(8)
转载请注明来源地址:不再犹豫 » Vue实例-本地留言板

评论 5

评论前必须登录!

 

  1. #-49

    666

    mrnaas2年前 (2021-01-08)
  2. #-48

    赞一个

    mrnaas2年前 (2021-01-08)
  3. #-47

    自己顶一个

    mrnaas2年前 (2021-01-08)
  4. #-46

    本地留言本demo

    mrnaas2年前 (2021-01-08)