Next [when vue encounters applet (1))
1.5 nested loop
· Vue.js
<!-- App.vue -->
<template>
<div id="app">
<div v-for="item in address">
<p>{{item.province}}</p>
<div>
<span v-for="grandItem in item.cities">{{grandItem}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
address: [
{ province: "Hunan", cities:["Changsha", "Zhuzhou", "Xiangtan", "Yueyang","city in Hunan"]},
{ province: "Guangdong", cities: ["Guangzhou", "Shenzhen", "Foshan", "Zhuhai", "Zhongshan"]},
{ province: "Guangxi", cities: ["Nanning", "city in Guangxi", "Guilin", "Yulin","The North Sea"]}
]
}
}
}
</script>
·Applet
<!--A.wxml-->
<view>
<view wx:for="{{address}}" wx:key="index">
<text>{{item.province}}</text>
<view>
<text wx:for="{{item.cities}}" wx:for-item="grandItem" wx:key="index">{{grandItem}}</text>
</view>
</view>
</view>
<!--A.js-->
Page({
data: {
address: [
{ province: "Hunan", cities:["Changsha", "Zhuzhou", "Xiangtan", "Yueyang","city in Hunan"]},
{ province: "Guangdong", cities: ["Guangzhou", "Shenzhen", "Foshan", "Zhuhai", "Zhongshan"]},
{ province: "Guangxi", cities: ["Nanning", "city in Guangxi", "Guilin", "Yulin","The North Sea"]}
]
}
})The second layer can also use item value, but both inside and outside are items, which is not conducive to use and maintenance.
<text wx:for="{{item.cities}}" wx:key="index">{{item}}</text>1.6 public formwork
In fact, the public template itself is a separate page. Here, parameters are mainly passed through the parent page to realize different sides of the same page!
1) , call the common module in App.vue and pass one or more parameters
In addition to props, there are Vuex, emit, ref and other methods for parameter passing. For details, please refer to vue component value transfer.
<template>
<div id="app">
<Head :hd="[title,hd,articles]"></Head>
<Article :atc="articles"></Article>
</div>
</template>
<script>
import Head from './components/sub/head';
import Article from './components/sub/article';
export default {
name: 'app',
components:{
Head,Article
},
data(){
return{
title:"Title",
hd:{name:"Title",desc:"Sketch"},
articles:[
{ name: "Dream is a horse", desc: "Bear with young people" },
{ name: "Facing the sea", desc: "Bear with young people" }
]
}
}
</script>· Vue.js
1) . public template: head.vue
Receive array values of multiple parameters
<template>
<div class="head">
<div>{{hd[0]}}</div>
<div>
<div>{{hd[1].name}}</div>
<p>{{hd[1].desc}}</p>
</div>
</div>
</template>
<script>
export default{
props:['hd']
}
</script>Common template: article.vue
<template>
<div class="article">
<div v-for="(item,index) in atc" :key="index">
<div>{{item.name}}</div>
<div>{{item.desc}}</div>
</div>
</div>
</template>
<script>
export default{
props:['atc']
}
</script>·Applet
1) , in index.wxml, pass one or more parameters
Here, is="head", that is, the public template that references name = "head"
<import src="../common/head.wxml" />
<import src="../common/article.wxml"/>
<view>
<template is="head" data="{{title: 'Static title'}}"/>
<template is="head" data="{{title}}"/>
<template is="head" data="{{hd,txt}}"/>
<template is="{{articles.length>0?'article':'head'}}" data="{{articles}}"/>
</view>index.js
Page({
data: {
title:"Title",
hd:{name:"Title",desc:"Sketch"},
txt:"Text content",
articles:[
{ name: "Dream is a horse", desc: "Bear with young people" },
{ name: "Facing the sea", desc: "Blooming Pinellia ternate" }
]
}
})
2) , common template: head.wxml
<template name="head">
<view class="page-head">
<view class="page-head-title">{{title?title:hd.name}}</view>
<view wx:if="{{hd}}" class="page-head-desc">{{hd.desc}}</view>
<view wx:if="{{txt}}"">{{txt}}</view>
</view>
</template>
Common template: article.wxml
<template name="article">
<view wx:for="{{articles}}" wx:key="index">
<text>{{item.name}}</text>
<view>{{item.desc}}</view>
</view>
</template>*Note: when passing multiple parameters to a module, the writing methods of the two are slightly different
Vue.js
<Head :hd="[title,hd,articles]"></Head>
Small program
<template is="head" data="{{hd,cloud}}"/>Unfinished...