zoukankan      html  css  js  c++  java
  • vue.js中如何渲染本地数据库中的图片

    // 带参数传值
    本地美食

    <template>
        <div>
            <h1>美食</h1>
            <table border="1">
                <tr>
                    <td>美食</td>
                    <td>美食图片</td>
                    <td>美食价格</td>
                </tr>
                <tr  v-for="i in footlist">
                    <td>{{i.name}}</td>
                    <td><img :src="i.img" height="100" width="100"></td> // 渲染本地图片
                    <td>{{i.price}}</td>
                </tr>
            </table>
        </div>
    </template>
    
    <script>
        export default {
            name: "foot",
            data: function () {
                return {
                    footlist: []  //初始化列表
                }
            },
            mounted() {
                var aa = this.$route.params.id;  //获取上个页面带过来的参数
                this.axios({
                url: '/api/app/foot/',  //api 是跨越时设置的 app是路由分发 foot是后端的接口
                data: {aa:aa},   //向后端传递参数
                method: 'post'  //post方式
            }).then((res) => {
                if (res.data.code == 200) {  // code == 200时
                    this.footlist = res.data.message; // 初始化赋值
                    console.log(res)
    
                }
            })
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    
  • 相关阅读:
    python 模块包裹
    函数指针
    python界面
    python FileError
    python pickle
    python file
    python set
    python 字典的函数
    字典问题
    java学习笔记4
  • 原文地址:https://www.cnblogs.com/pp8080/p/12189205.html
Copyright © 2011-2022 走看看