淘宝购物车VUE

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 id="app">

    <Index></Index>

  </div>

</template>

<script>

import Index from "./components/Index.vue";

export default {

  name: "App",

  components: {

    Index,

  },

};

</script>

<style>

* {

  margin: 0;

  padding: 0;

  list-style: none;

  text-decoration: none;

  outline: none;

}

.flex {

  display: flex;

}

.j-c {

  justify-content: center;

}

.j-s {

  justify-content: space-between;

}

.a-c {

  align-items: center;

}

a {

  color: black;

}

#app {

  width: 1200px;

  margin: 0 auto;

  /* border: 1px solid #ccc; */

  padding: 0 5px;

}

</style>

Footer.vue

 

<template>

<div class="foot flex j-s a-c">

    <div class="blue" @click="clear">清空购物车</div>

    <div class="right">

        <div>商品总价（不含运费）：</div>

        <div><span>{ {totalprice}}</span>元</div>

        <div>可获积分<span>{ {totaljf}}</span>点</div>

        <div>

            <img src="/image/taobao_subtn.jpg&