vue小案例--简易评论区

一、小案例（评论区）

1、流程

（1）分析静态页面。（vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html）
（2）拆分静态页面，变成一个个组件。
（3）对组件编码，生成动态页面。

2、静态页面

参考来源：https://www.bilibili.com/video/av49099807/?p=22&t=1223

【举例：】
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--此处如果bootstrap选用 4.3.1的版本，样式会无效（没去研究）-->
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
        <title>vue_demo</title>
    </head>

    <body>
        <div id="app">
            <div>
                <!--头部-->
                <header class="site-header jumbotron">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12">
                                <h1>欢迎来到吐槽大厅</h1>
                            </div>
                        </div>
                    </div>
                </header>

                <!--主体部分-->
                <!--bootstrap将页面分为12格，此处拆分为左4格，右8格-->
                <div class="container">
                    <div class="col-md-4">
                        <form action="form-horizontal">
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" class="form-control" placeholder="用户名">
                            </div>
                            <div class="form-group">
                                <label>吐槽内容</label>
                                <textarea type="text" class="form-control" placeholder="吐槽内容"></textarea>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="button" class="btn btn-default pull-right">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--md4 for Add end    -->

                    <div class="col-md-8">
                        <h3 class="reply">吐槽回复：</h3>
                        <h2>暂无吐槽，点击左侧添加吐槽吧！</h2>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <div class="handle col-sm-offset-2 col-sm-10">
                                    <a class="pull-right">删除</a>
                                </div>
                                <p class="user"><span>Tom</span><span>说:</span></p>
                            </li>
                            <li class="list-group-item">
                                <div class="handle col-sm-offset-2 col-sm-10">
                                    <a class="pull-right">删除</a>
                                </div>
                                <p class="user"><span>Tom</span><span>说:</span></p>
                            </li>
                        </ul>
                    </div>
                    <!--md8 for List end -->
                </div>
            </div>
        </div>
        <!--app -->
    </body>

</html>

页面截图：

3、拆分静态页面，

拆分静态页面，使其变成一个个静态组件。

Step1：是一个大的组件（App），里面包含各种组件。

Step2：页面内容可以拆分成 提交吐槽组件（Comment），吐槽回复组件（Comments）。

Step3：吐槽回复组件里面 可以对 每一条吐槽进行拆分，即每个吐槽为一个组件（Item）。

文件结构如下：

【主要文件与文件夹：】
index.html    主页面，所有组件操作均为其服务，在此处引入css、js文件
main.js       vue入口文件，从此处启动vue
App.vue       App.vue组件，项目的入口组件
components      里面保存各个小组件

【index.html】
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--所有组件都是为index.html服务的，所以在此处引入css、js文件-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <title>vuedemo</title>
  </head>
  <body>
    <noscript>
      <strong>We‘re sorry but vuedemo doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

【main.js】
import Vue from ‘vue‘
import App from ‘./App.vue‘

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格，此处拆分为左4格，右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment></Comment>
            <Comments></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from ‘./components/Comment.vue‘
    import Comments from ‘./components/Comments.vue‘

    export default {
        name: ‘app‘,
        // 注册各组件
        components: {
            Comment,
            Comments
        }
    }
</script>

<style>
</style>

【Comment.vue】
<template>
    <div class="col-md-4">
        <form action="form-horizontal">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="用户名">
            </div>
            <div class="form-group">
                <label>吐槽内容</label>
                <textarea type="text" class="form-control" placeholder="吐槽内容"></textarea>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default pull-right">提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--Comment -->
</template>

<script>
    export default{
        name: ‘comment‘
    }
</script>

<style>

</style>

【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复：</h3>
        <h2>暂无吐槽，点击左侧添加吐槽吧！</h2>
        <ul class="list-group">
            <Item></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from ‘./Item.vue‘

    export default{
        name: ‘comments‘,
        components: {
            Item
        }
    }
</script>

<style>

</style>

【Item.vue】
<template>
    <!--注意，需要使用div包裹，否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span>Tom</span><span>说:</span></p>
        </li>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span>Tom</span><span>说:</span></p>
        </li>
    </div>
</template>

<script>
    export default{
        name: ‘item‘
    }
</script>

<style>

</style>

拆分后效果与原静态页面一致。

4、组件间值的传递（组件间通信）

　　静态页面上吐槽区的内容不会是写好的，是动态生成的，那么如何生成，就涉及到组件间的值的传递。通过props 来声明属性，使用data来传递数据（属性值），使用 v-bind 绑定属性。

【对上面代码进行修改】
App.vue              获取数据，将数据往吐槽区（Comments.vue）传
Comments.vue         接收App.vue传来的数据，将每条数据往Item.vue传
Item.vue             接收Comments.vue传来的数据并显示

要是一眼看不出来，可以下载个Bcompare软件，自行比较一下代码间的区别。

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格，此处拆分为左4格，右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment></Comment>
                   <!--需使用v-bind绑定属性-->
            <Comments :contents="contents"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from ‘./components/Comment.vue‘
    import Comments from ‘./components/Comments.vue‘

    export default {
        name: ‘app‘,
        // 注册各组件
        components: {
            Comment,
            Comments
        },

        // 传递数据
        data(){
            return {
                contents:[
                    {name: ‘tom‘, content: ‘妈妈，我想吃烤山药‘},
                    {name: ‘jarry‘, content: ‘吃，吃大块的‘},
                    {name: ‘jarry‘, content: ‘两块够不‘},
                    {name: ‘tom‘, content: ‘够了，妈妈真好，谢谢妈妈‘},
                ]
            }
        }
    }
</script>

<style>
</style>

【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复：</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from ‘./Item.vue‘

    export default{
        name: ‘comments‘,
        // 声明接收属性，此属性可以在该组件中使用
        props: [‘contents‘],  // 只指定属性名

        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>

【Item.vue】
<template>
    <!--注意，需要使用div包裹，否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: ‘item‘,
        props: {
            // 指定属性名以及属性值的类型
            content : Object
         }
    }
</script>

<style>

</style>

效果如下图：

5、动态交互--添加

　　实现添加吐槽操作。

　　使用v-on 绑定事件，使用v-model 实现数据的双向绑定，方法也可以使用 v-bind 绑定 并进行组件通信。

【对上面代码进行修改】
App.vue            定义增加吐槽的方法，并作为属性传递给Comment.vue组件
Comment.vue        接收属性，并定义添加数据的事件

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格，此处拆分为左4格，右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from ‘./components/Comment.vue‘
    import Comments from ‘./components/Comments.vue‘

    export default {
        name: ‘app‘,
        // 注册各组件
        components: {
            Comment,
            Comments
        },

        // 传递数据
        data(){
            return {
                contents:[
                    {name: ‘tom‘, content: ‘妈妈，我想吃烤山药‘},
                    {name: ‘jarry‘, content: ‘吃，吃大块的‘},
                    {name: ‘jarry‘, content: ‘两块够不‘},
                    {name: ‘tom‘, content: ‘够了，妈妈真好，谢谢妈妈‘},
                ]
            }
        },

        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            }
        }
    }
</script>

<style>
</style>

【Comment.vue】
<template>
    <div class="col-md-4">
        <form action="form-horizontal">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="用户名" v-model="name">
            </div>
            <div class="form-group">
                <label>吐槽内容</label>
                <textarea type="text" class="form-control" placeholder="吐槽内容" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--Comment -->
</template>

<script>
    export default{
        name: ‘comment‘,
        data(){
            return {
                name : ‘‘,
                content : ‘‘
            }
        },
        props:{
            // 定义属性类型、属性值类型、必须性
            addComment: {
                type: Function,
                required: true
            }
        },
        methods: {
            add(){
                // step1：进行合法性检验
                const name = this.name.trim();
                const content = this.content.trim();
                if(!name || !content){
                    alert("输入内容不能为空");
                    return;
                }

                // step2：将name,content封装成一个comment（吐槽）对象
                const comment = {name, content};

                console.log(comment);
                // step3: 将comment 加入到 comments（吐槽区）
                this.addComment(comment);

                // step4：清空输入框
                this.name = ‘‘;
                this.content = ‘‘;
            }
        }
    }
</script>

<style>

</style>

效果：

6、动态交互--删除

　　进行删除操作。

　　类似于添加操作。

【对上面文件进行修改】
App.vue             定义删除数据的方法，并将其作为属性传递给Comments.vue
Comments.vue        作为一个中间的组件，传递index以及删除方法
Item.vue            接收Comments.vue传递的属性，并定义删除事件

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格，此处拆分为左4格，右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents" :deleteComment="deleteComment"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from ‘./components/Comment.vue‘
    import Comments from ‘./components/Comments.vue‘

    export default {
        name: ‘app‘,
        // 注册各组件
        components: {
            Comment,
            Comments
        },

        // 传递数据
        data(){
            return {
                contents:[
                    {name: ‘tom‘, content: ‘妈妈，我想吃烤山药‘},
                    {name: ‘jarry‘, content: ‘吃，吃大块的‘},
                    {name: ‘jarry‘, content: ‘两块够不‘},
                    {name: ‘tom‘, content: ‘够了，妈妈真好，谢谢妈妈‘},
                ]
            }
        },

        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            },
            deleteComment(index){
                // 删除指定下标的数据
                this.contents.splice(index, 1);
            }
        }
    }
</script>

<style>
</style>

【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复：</h3>
        <h3 v-show="contents.length === 0">暂无吐槽，点击左侧提交吐槽！！！</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content" :deleteComment="deleteComment" :index="index"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from ‘./Item.vue‘

    export default {
        name: ‘comments‘,
        // 声明接收属性，此属性可以在该组件中使用
        props: [‘contents‘, ‘deleteComment‘], // 只指定属性名

        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>

【Item.vue】
<template>
    <!--注意，需要使用div包裹，否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right" @click="deleteItem">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: ‘item‘,
        props: {
            // 指定属性名以及属性值的类型
            content : Object,
            deleteComment : Function,
            index : Number
         },
         methods: {
             deleteItem() {
                 const {content, deleteComment, index} = this;
                 // 使用  反引号 + ${}， ES6模板字符串
                 if(window.confirm(`确定删除${content.name}的评论吗？`)){
                     deleteComment(index);
                 }
             }
         }
    }
</script>

<style>

</style>

运行结果：

7、完整代码

（1）项目结构以及修改的文件

（2）代码

【index.html】
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--所有组件都是为index.html服务的，所以在此处引入css、js文件-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <title>vuedemo</title>
  </head>
  <body>
    <noscript>
      <strong>We‘re sorry but vuedemo doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

【main.js】
import Vue from ‘vue‘
import App from ‘./App.vue‘

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格，此处拆分为左4格，右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents" :deleteComment="deleteComment"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from ‘./components/Comment.vue‘
    import Comments from ‘./components/Comments.vue‘

    export default {
        name: ‘app‘,
        // 注册各组件
        components: {
            Comment,
            Comments
        },

        // 传递数据
        data(){
            return {
                contents:[
                    {name: ‘tom‘, content: ‘妈妈，我想吃烤山药‘},
                    {name: ‘jarry‘, content: ‘吃，吃大块的‘},
                    {name: ‘jarry‘, content: ‘两块够不‘},
                    {name: ‘tom‘, content: ‘够了，妈妈真好，谢谢妈妈‘},
                ]
            }
        },

        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            },
            deleteComment(index){
                // 删除指定下标的数据
                this.contents.splice(index, 1);
            }
        }
    }
</script>

<style>
</style>

【Comment.vue】
<template>
    <div class="col-md-4">
        <form action="form-horizontal">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="用户名" v-model="name">
            </div>
            <div class="form-group">
                <label>吐槽内容</label>
                <textarea type="text" class="form-control" placeholder="吐槽内容" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--Comment -->
</template>

<script>
    export default{
        name: ‘comment‘,
        data(){
            return {
                name : ‘‘,
                content : ‘‘
            }
        },
        props:{
            // 定义属性类型、属性值类型、必须性
            addComment: {
                type: Function,
                required: true
            }
        },
        methods: {
            add(){
                // step1：进行合法性检验
                const name = this.name.trim();
                const content = this.content.trim();
                if(!name || !content){
                    alert("输入内容不能为空");
                    return;
                }

                // step2：将name,content封装成一个comment（吐槽）对象
                const comment = {name, content};

                console.log(comment);
                // step3: 将comment 加入到 comments（吐槽区）
                this.addComment(comment);

                // step4：清空输入框
                this.name = ‘‘;
                this.content = ‘‘;
            }
        }
    }
</script>

<style>

</style>

【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复：</h3>
        <h3 v-show="contents.length === 0">暂无吐槽，点击左侧提交吐槽！！！</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content" :deleteComment="deleteComment" :index="index"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from ‘./Item.vue‘

    export default {
        name: ‘comments‘,
        // 声明接收属性，此属性可以在该组件中使用
        props: [‘contents‘, ‘deleteComment‘], // 只指定属性名

        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>

【Item.vue】
<template>
    <!--注意，需要使用div包裹，否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right" @click="deleteItem">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: ‘item‘,
        props: {
            // 指定属性名以及属性值的类型
            content : Object,
            deleteComment : Function,
            index : Number
         },
         methods: {
             deleteItem() {
                 const {content, deleteComment, index} = this;
                 // 使用  反引号 + ${}， ES6模板字符串
                 if(window.confirm(`确定删除${content.name}的评论吗？`)){
                     deleteComment(index);
                 }
             }
         }
    }
</script>

<style>

</style>

运行结果此处不再重复截图，与上述截图相同。

原文地址：https://www.cnblogs.com/l-y-h/p/11647918.html

时间： 2024-08-29 02:44:44

vue小案例--简易评论区的相关文章

VUE小案例--跑马灯效果

自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

vue小案例(跑马灯)

html模块!! <div id="app"> <h4> {{msg}} </h4> //开始跑马状态 <input type="button" value="飘" @click='lang'> //停止 <input type="button" value="定住" @click='stop'> </div>  script模块 va

Vue(小案例_vue+axios仿手机app)_购物车

一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球显示出来(这里需要用到vue中的动画过渡) 结构如下(这是在加入购物车这个页面) //小球 <transition name='ball' @after-enter='afterEnter'> <div class="ball" v-if="isExist&qu

Vue小案例 之 商品管理------创建页面与部分数据

logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div class="header"> <img :src="imgUrl+imgName" class="logo" height="200px" width="150px" style="paddin

Vue(小案例）底部tab栏和顶部title栏的实现

---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现 二.主要内容   1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应的显示高亮,并且切换到对应的页面中 (1)html/css代码 <template> <div> <footer class="footer_guide border-1px"> <a href="#" class="

小程序评论区动态刷新

还是前两天的小程序,用户的个人主页需要有评论区,发布评论之后需要把评论写到数据库,同时动态更新评论区. 评论的数据库设计如下: POST请求将评论发送给后台 ownerID获得不太难,之前进入主页的时候已经把用户名给传进来了,那么commenterID要怎么获得呢? 可以在app.js里面定义全局数组,当用户成功登录后,把从数据库查询相关信息存储来记录用户的相关信息,需要的时候调取即可. //app.jsApp({ ...... user:{ userID:-1, userName:""

Vue iview中的render小案例3

当我按下play.穿梭在大街小巷没什么不对.每个人都会.只是你在束缚自己.快来做个一等一的player.要求自己不能够太普通.一定必须要去做点成就 Vue iview中的render小案例 第一个数据比较好拿是对象直接.就可以,第二个是数组所以需要遍历会麻烦些 工序一道也少不了,就像下面迟早会补齐的 每天记录一点点 { title: "场馆地址", // key: "gymnasium.name" render: (h, params) => { return

Android JSON解析库Gson和Fast-json的使用对比和图书列表小案例

Android JSON解析库Gson和Fast-json的使用对比和图书列表小案例 继上篇json解析,我用了原生的json解析,但是在有些情况下我们不得不承认,一些优秀的json解析框架确实十分的好用,今天我们为了博客的保质保量,也就不分开写,我们直接拿比较火的Gson和Fast-json来使用,末尾在进行一些分析 Android JSON原生解析的几种思路,以号码归属地,笑话大全,天气预报为例演示 一.各有千秋 两大解析库的东家都是巨头,一个来自于Google官方,一个来自阿里巴巴,我们这

十五道Python小案例，学会这些，Python基础已过关！

十五道Python的小案例,不知道各位都会了多少! 一.猜数字 1到4能组成多少个互不相同且不重复数字的三位数?分别是? 分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. 程序源代码: 二.公司发放的奖金的计算 分析:请利用数轴来分界,定位.注意定义时需把奖金定义成长整型. 程序源代码: 三.一个整数加上100后是一个完全平方数,再加168又是一个完全平方数,请问该数是多少? 分析: 程序源代码: 四.输入*年*月*日,判断这一天是这一年的第几天?