zoukankan      html  css  js  c++  java
  • day68 作业

    car页面
    template>
        <div class="car">
            <Nav/>
            <div class="wrap">
                <CarTag v-for="car in cars" :car="car" />
            </div>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav.vue"
        import CarTag from "../components/CarTag";
    
        export default {
            name: "Car",
            data(){
                return {
                    cars:''
                }
            },
            components:{
                CarTag,
                Nav,
            },
            created() {
                console.log('组件创建成功');
                this.cars = [
                        {
                            img:require('@/assets/img/101.jpg'),
                            title:'Devel Sixteen',
                            desc:'一号车详情'
                        },
                        {
                            img:require('@/assets/img/201.jpg'),
                            title:'Devel Sixteen',
                            desc:'2号车详情'
                        },
                        {
                            img:require('@/assets/img/301.jpg'),
                            title:'Devel Sixteen',
                            desc:'3号车详情'
                        },
                        {
                            img:require('@/assets/img/401.jpeg'),
                            title:'Devel Sixteen',
                            desc:'4号车详情'
                        }
    
                    ]
            }
        }
    </script>
    Nav页面
    <template>
        <div id="nav">
            <div class="content">
                <router-link to="/">主页</router-link>
                <router-link to="/car">汽车</router-link>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "Nav",
        }
    </script>
    
    <style scoped>
    #nav a.router-link-exact-active {
      color: #42b983;
    }
    </style>
    cardata页面
    <template>
        <div>
            <Nav />
            <p>{{ pk }}</p>
        </div>
    </template>
    
    <script>
        import Nav from "../components/Nav";
        export default {
            name: "car-data",
            data(){
                return{
                    pk:"尚未选择车型"
                }
            },
            created() {
            this.pk = this.$route.query.pk
            },
            components: {
            Nav
          }
        }
    </script>
    
    
  • 相关阅读:
    python中的operator.itemgetter函数
    win10下安装Cygwin配置gcc编译环境
    英文单词拼写纠错
    关于文本处理之结巴分词
    mysql 主从复制
    YII2.0 增删改查
    Linux screen命令简介
    Zookeeper简介与安装
    如何在Linux上安装Tomcat
    Java学习笔记之自定义异常
  • 原文地址:https://www.cnblogs.com/fwzzz/p/12119024.html
Copyright © 2011-2022 走看看