微信小程序模板与vue模板的差别
-
小程序模板 他有name表示该模板的名字,定义好后就可以在中间写代码了
<template name="list"> </template>
-
vue的模板没有实质性的,vue只会把template里面的内容进行编译, vue的template就和微信小程序中的block一样,可以当标签使用但是在页面中不显示;
-
模板就相当于vue的组件,把一些公共的部件提取出来方便其他页面使用
如何使用呢
-
写好了如何使用
<template name="list"> <view>姓名:tom</view> <view>年龄:27</view> </template>
-
模板调用
-
在当前页面中使用 is表示你使用的模板name对应的名字
<template name="list"> <view>姓名:tom</view> <view>年龄:27</view> </template> <template is="list"></template>
-
动态添加data中的数据
data是js文件中的data数据data:{student:{id:1,name:"wq",age:18}}, 如果data的值是对象就可以使用es6的解构data="{{...student}}"的方式, 在页面中就可以使用{{name}}{{age}}<template name="list"> <view>姓名:{{student.name}}</view> <view>年龄:{{student.age}}</view> </template> <template is="list" data="{{student}}"></template>
-
如果是数组对象则可以进行循环 这样就可以直接获取数据了
<view wx:for={{studentList}}"> <template is="list" data="{{...item}}"></template> </view>
-
模板切换如果有两个模板 一个竖排显示list,一个横排显示text_list, 在data里面设置一个flag默认为竖排true,到时候想要横排就为false就行了
<template name="list"> <view>姓名:{{name}}</view> <view>年龄:{{age}}</view> </template> <template name="text_list"> <text>姓名:{{name}}</text> <text>年龄:{{age}}</text> </template> <view wx:for={{studentList}}"> <template is="{{flag?'list':'text_list'}}" data="{{...item}}"></template> </view>
-
现在这是在本页面中使用,我们应该引入模板,先在项目中创建一个模板文件夹, 然后对应创建模板页面只需要.wxml的页面就行了,然后在你需要的页面中引入就行了, 使用import标签在找到想要引入的页面路径就行了
<import src="/templates/studentList.wxml"/> <import src="/templates/studentText.wxml"/> <view wx:for="{{studentList}}"> <template is="{{flag?'list':'text_list'}}" data="{{...item}}"></template> </view>
-