Vue实例-本地留言板

最新推荐文章于 2024-05-17 05:17:47 发布

置顶 MN乐享

最新推荐文章于 2024-05-17 05:17:47 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： html html5 vue.js node.js javascript

本文链接：https://blog.csdn.net/wangtong0211/article/details/113385926

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

好久没有写新的笔记了，今天回想了一下之前学习的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://www.mrnaas.com/webdemo/Notepad/

链接: 百度网盘请输入提取码

提取码获取方法：

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

GitHub

GitHub - twang211/webdemo: 用于收藏webdemo

MN乐享

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue实例-本地留言板

好久没有写新的笔记了，今天回想了一下之前学习的Vue知识，现在复习一遍，写写学习事的实例并加以修改一下：本地记事本：本地简单的留言板功能，后期其实可以添加盖楼功能的，但是目前先不考虑，大家也可以自己试着添加一下，后期我更新后会同步代码！1、主要功能（1）添加留言（2）删除留言（3）留言统计及删除2、主要知识点：（1）监听事件—–v-on/@（2）list—–v-for（3）数据绑定—–v-model（4）v-show在线演示代码示例：<!D
复制链接

扫一扫