bootstrap 打印组件_41. Vue组件案例评论列表

最新推荐文章于 2021-06-08 14:56:52 发布

weixin_39782500

最新推荐文章于 2021-06-08 14:56:52 发布

阅读量130

点赞数

文章标签： bootstrap 打印组件 vue获取文本框内容

需求

为了更好看看父子组件之间的传值，本章来一个评论列表的小案例。

编写这个案例步骤大致如下：

编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表
那么「提交评论信息表单」可以写为一个子组件，而「评论信息列表」为父组件
给「提交评论信息表单」将子组件的评论内容传递到父组件「评论信息列表」
同时，需要写一个存储以及刷新评论信息列表的方法，在子组件提交评论信息之后，子组件还要调用父组件的这个刷新方法。
评论信息的基本存储方式可以用「localStorage」

好了，看到上面几项的需求描述，下面来实现看看。

示例

1.编写基本页面

span style="line-height: 26px;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>

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

<link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
<script type="text/javascript" src="lib/bootstrap4/popper.min.js">script>
<script type="text/javascript" src="lib/bootstrap4/bootstrap.min.js">script>
head>
<body>

<div id="app">

<div class="container">


<div class="row mt-2">

<div class="form-group row">
<label for="input_person" class="col-4 col-form-label">评论人label>
<div class="col-8">
<input type="text" class="form-control" id="input_person" placeholder="评论人">
div>
div>


<div class="form-group row ml-3">
<label for="input_content" class="col-4 col-form-label">评论内容label>
<div class="col-8">
<input type="text" class="form-control" id="input_content" placeholder="评论内容">
div>
div>


<input type="button" value="提交" class="btn btn-primary ml-2 mb-3">

div>



<div class="row">
<table class="table">
<thead>
<tr>
<th scope="col">评论人th>
<th scope="col">内容th>
<th scope="col">时间th>
<th scope="col">操作th>
tr>
thead>
<tbody>
<tr>
<th scope="row">李白th>
<td>床前明月光td>
<td>2020-01-17 12:21:31td>
<td><a href="#">删除a>td>
tr>
<tr>
<th scope="row">杜甫th>
<td>疑是地上霜td>
<td>2020-01-16 12:21:31td>
<td><a href="#">删除a>td>
tr>
<tr>
<th scope="row">王维th>
<td>黑云压城城欲摧td>
<td>2020-01-17 10:21:31td>
<td><a href="#">删除a>td>
tr>
tbody>
table>
div>


div>

div>

<script>// 2\. 创建一个Vue的实例var vm = new Vue({el: '#app',data: {
            },methods:{}
        })script>

body>
html>

页面显示如下：

好了，现在基本页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系，我将上面提交评论的部分抽出来作为一个子组件。

2.抽取评论内容作为子组件

上面抽取添加评论内容为一个组件之后，下面来在父组件中使用子组件，如下：

浏览器显示如下：

那么组件显示成功之后，下面就应该实现一下添加评论内容的功能。

3.实现添加评论内容的思路

本次添加评论内容首先需要考虑一个数据的存储，之前的一个示例是直接加入到父组件Vue实例的data中，这个比较简单。

那么本次则试下使用浏览器的「localStorage」来进行数据存储。

那么首先要复习一下「localStorage」的基本用法，如下：

//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

好了，知道了基本用法，下面就要存储一下评论内容到「localStorage」中。

实现思路：

首先组件设置data参数：评论者user和评论内容comments，使用v-model绑定两个文本框的值，然后给添加按钮设置click方法，在方法中将user 和comments存储到localStorage中。

4.使用v-mode设置评论者以及评论内容

5.设置提交按钮的click事件，打印评论数据

在浏览器查看一下打印出来的数据，如下：

已经可以获取到数据了，下面将其进行存储。

6.将获取的user和comment存储到localStorage中

打开浏览器，查看存储的数据，如下：

7.存储评论内容数据完毕后，清空输入框

好了，这时候已经设置添加好评论内容的数据。下面来看看如何在列表中刷新数据。

8.在父组件编写刷新列表的方法reload_list()，提供子组件进行调用

在浏览器点击提交按钮，查看是否触发父组件的reload_list方法，如下：

好了，到这里可以执行父组件的刷新列表方法了，那么下面只要完善刷新列表的方法，对数据进行刷新即可。

9.设置reload_list()读取localStorage数组

10.使用v-for渲染从localStorage读取出来的数组数据

浏览器测试如下：

已经成功可以添加评论以及刷新列表数据了。

交流QQ群：

点击下面，查看更多Vue系列文章

weixin_39782500

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 打印组件_41. Vue组件案例评论列表

需求为了更好看看父子组件之间的传值，本章来一个评论列表的小案例。编写这个案例步骤大致如下：编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表那么「提交评论信息表单」可以写为一个子组件，而「评论信息列表」为父组件给「提交评论信息表单」将子组件的评论内容传递到父组件「评论信息列表」同时，需要写一个存储以及刷新评论信息列表的方法，在子组件提交评论信息之后，子组件还要...
复制链接

扫一扫