vue 学习小结（1）关于v-for

た入场券 2022-11-14 00:46 134阅读 0赞

# 1.新建项目 #

选择如下配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]

# 2.修改index.html #

参考教程：chapter09 List Rendering

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
    	<ul>
    		<li v-for="item,index in items" :key="index">
    		{
       {index}}{
       { item.message }}
    		</li>
    	</ul>
    	<ul>
    		<li v-for="value, key in object">
    			{
       {key}} : {
       { value }}
    		</li>
    	</ul>
    </div>
    <script type="text/javascript"> var vm = new Vue({ el : "#app", data : { items : [ { message: 'Foo' }, { message: 'Bar' } ], object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }); </script>
    </body>
    </html>

运行后，效果如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1]

# 3.修改List #

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
    	<ul>
    		<li v-for="item,index in items" :key="index">
    			{
       {item.date}} 	<br>
    			{
       {item.uers}} <br>
    			{
       { item.message }}
    		</li>
    	</ul>
    </div>
    <script type="text/javascript"> var vm = new Vue({ el : "#app", data : { items : [ { date: '2021年3月27日7点00分' , uers: 'zhu', message: 'go school' }, { date: '2021年3月27日11点30分' , uers: 'tou', message: 'eat lunch' } ] } }); </script>
    </body>
    </html>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 2]

# 4.数据由get请求获取 #

页面加载时，发起get请求

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
    	<ul>
    		<li v-for="item in info">
    			{
       {item.date}}<br>
    			{
       {item.uers}}<br>
    			{
       {item.message}}
    		</li>
    	</ul>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script></script>
    <script type="text/javascript"> var vm = new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('http://127.0.0.1/plan') .then(response => (this.info = response.data.items)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) </script>
    </body>
    </html>

服务器端

# -*- coding: UTF-8 -*-
    from flask import Flask, request, jsonify
    
    app = Flask(__name__)
    
    
    @app.route('/plan', methods=["GET"])
    def calculate():
        res = { 
            "items": [
                { 'date': '2021年3月27日7点20分', 'uers': 'zhuyu', 'message': 'go school'},
                { 'date': '2021年3月27日11点30分', 'uers': 'tou', 'message': 'eat lunch'}
            ]
        }
        print("hello")
        return jsonify(res)
    
    
    if __name__ == '__main__':
        app.run(host='127.0.0.1', threaded=True, debug=True, port=80)

json格式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 3]  
整体效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]: /images/20221022/5eb6a4af03e746b5b2a194d10b8b07ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20221022/bade71333e1f4212817c7e61494ecdf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210327175207912.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210327192805680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210327192826603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70