Data & Methods
创立组件 ProductListOne
<template>
<div id="product-list-one">
<h2>Product List One</h2>
<ul>
<li v-for="product in products">
<span class="name">{{product.name}}</span>
<span class="price">£{{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {props: ['products'],
data () {return {}
}
}
</script>
<style scoped>
#product-list-one{
background: #FFF8B1;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
margin-bottom: 30px;
padding: 10px 20px;
}
#product-list-one ul{padding: 0;}
#product-list-one li{
display: inline-block;
margin-right: 10px;
margin-top: 10px;
padding: 20px;
background: rgba(255,255,255,0.7);
}
.price{
font-weight: bold;
color: #E8800C;
}
</style>组件导入及注册
import ProductListOne from './components/ProductListOne.vue'
import ProductListTwo from './components/ProductListTwo.vue'
export default {
name: 'app',
components: {
'product-list-one': ProductListOne,
'product-list-two': ProductListTwo
},
data () {
return {
products: [{name: 'Banana Skin', price: 20},
{name: 'Shiny Star', price: 40},
{name: 'Green Shells', price: 60},{name: ‘Red Shells’, price: 80}
]
}
}
}
组件应用 <template>
<div id=”app”>
<product-list-one v-bind:products=”products”></product-list-one>
<product-list-two v-bind:products=”products”></product-list-two>
</div>
</template>
运行成果
