[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<script src="https://unpkg.com/vue@next"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#app {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
}
.header {
flex: 1;
position: absolute;
height: 5%;
text-align: center;
width: 100%;
}
.footer {
flex: 1;
height: 5%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer ul {
display: flex;
}
.footer ul li {
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.shoplist {
position: absolute;
margin-top: 2rem;
overflow:auto;
height: 90%;
}
.shoplist ul li div img {
width: 10rem;
height: 10rem;
}
.shoplist ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body>
<div id="app">
<shoptitle :ifshowShopInfo="ifshowShopInfo"></shoptitle>
<shoplist @ifshowshopinfo="getshow"></shoplist>
<footerlist></footerlist>
</div>
<script>
const app = Vue.createApp({
data() {
return {
ifshowShopInfo: ''
}
},
methods: {
getshow(data){
this.ifshowShopInfo = data
}
}
})
app.component("shoptitle", {
props: {
ifshowShopInfo: {
type: Object
}
},
template: `<div class="header" @click="djbtn">
<h2 v-if="!ifshowShopInfo">主页</h2>
<h2 v-if="ifshowShopInfo">商品详情页</h2>
</div>`,
data(){
return{
ifshow: this.ifshowShopInfo || ""
}
},
methods: {
djbtn(){
console.log(this.ifshowShopInfo)
}
},
watch: {
ifshowShopInfo(val) {
this.ifshow = val
},
ifshow(val) {
if (this.ifshowShopInfo !== val) {
console.log(this.ifshowShopInfo)
}
else {
console.log(this.ifshowShopInfo)
}
}
}
})
app.component("shoplist", {
data() {
return {
shoplist: [
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"}
],
ifshowShopInfo: false,
shopInfo: {name: "德芙",price: "￥69.90",src: "df.jpg"}
}
},
methods: {
showShopInfo(){
this.ifshowShopInfo = true
this.$emit("ifshowshopinfo",this.ifshowShopInfo)
}
},
template: `<div class="shoplist">
<ul>
<li v-for="(item,index) in shoplist" :key="index" v-if="!ifshowShopInfo" @click="showShopInfo">
<div><img :src="item.src" alt=""></div>
<div>{{item.name}} <span>{{item.price}}</span></div>
</li>
</ul>
<div v-if="ifshowShopInfo">
<img :src="shopInfo.src" alt="">
<p>{{shopInfo.name}} <span>{{shopInfo.price}}</span></p>
</div>
</div>`
})
app.component("footerlist", {
data() {
return {
footerlist: [1,2,3,4]
}
},
template: `<div class="footer">
<ul>
<li v-for="(item,index) in footerlist" :key="index">{{item}}</li>
</ul>
</div>`
})
const vm = app.mount("#app")
</script>
</body>
</html>
发表于 2021-9-25 12:19
|
发表于 2021-9-26 10:53
