uni-app组件知识记录
目录[*]style标签的lang
[*]视图容器
[*]组件scroll-view的使用(滚动)
[*]组件swiper的使用(轮播)
[*]媒体组件
[*]组件image的使用(图片)
[*]路由与页面跳转
[*]navigator
[*]tabBar底部导航配置
[*]表单提交
[*]组件
[*]动态赋值子组件的属性字段props
[*]VUE语法
[*]data 属性
[*]指令
[*]v-if/v-else
[*]v-show
[*]v-for循环
[*]v-html标签
[*]v-bind动态绑定
[*]v-on 指令
[*]class与style绑定
[*]导航栏高亮显示
[*]v-model双向绑定
[*]v-model示例
[*]计算属性和侦听器
[*]计算属性computed
[*]子组件触发自定义事件传递给父组件
[*]将原生事件绑定到组件
[*]子组件向上传值案例
[*].sync 修饰符
[*]vue的生命周期
[*]App.vue中的方法
[*]API使用
[*]路由跳转页面
[*]携带参数跳转页面传参
[*]界面
[*]下方弹出菜单
[*]设置导航条
[*]设置TabBar
[*]使用iconfont图标
[*]动态设置 tabBar 某一项的内容
[*]为 tabBar 某一项的右上角添加文本。
[*]网络
[*]发起请求
[*]新闻文章案例
[*]问题
[*]图片遮住其他内容
[*]vue中返回false场景
[*]接口QPS小，频繁请求导致500的问题
[*]开发新闻应用
style标签的lang
<template>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><h1 >我</h1>是谁
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></view>
</template>scss是css样式增强版定义
样式中可以嵌套，标签或者class定义
视图容器
组件scroll-view的使用(滚动)
<template>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><scroll-viewscroll-x="true">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="../../static/img/小猫测试.jpeg">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="../../static/img/小猫测试.jpeg">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="../../static/img/小猫测试.jpeg">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></scroll-view>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></view>
</template>
组件swiper的使用(轮播)
<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper>.swiper {
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>height: 300rpx;
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>.swiper-image {
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>height: 300rpx;
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>width: 750rpx;
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}
}
媒体组件
组件image的使用(图片)
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>aspectFill: 始终保持宽或者高全部展示
当容器image的宽度小于图片宽度时，图片高度完全展示，当容器image的高度小于图片高度时，图片宽度完全展示
图片: 320px 240px
.image-t {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>width: 200px;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// height: 300px;}
路由与页面跳转
navigator
<navigator url="/pages/list/list">跳转到list页面(保留历史页面，左上角有返回按钮)</navigator>
<navigator url="/pages/list/list" open-type="redirect">跳转到list页面，打开新页面，左上角没有返回按钮</navigator>
navigate: 保留历史页面，可以跳转到非 tabBar 的页面的路径
redirect: 不保留历史页面打开新页面，不可跳转到非tabBar页面路径
switchTab: url不能携带参数
reLaunch: url可以携带参数，可以跳转到非 tabBar 的页面的路径但不能带参数
tabBar底部导航配置
{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"tabBar": {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"color": "#7A7E83",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"selectedColor": "#3cc51f",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"borderStyle": "black",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"backgroundColor": "#ffffff",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"list": [{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"pagePath": "pages/index/index",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"text": "首页"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"pagePath": "pages/list/list",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"text": "列表"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>]<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
表单提交
<template>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><scroll-viewscroll-x="true">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="../../static/img/小猫测试.jpeg">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="../../static/img/小猫测试.jpeg">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="../../static/img/小猫测试.jpeg">
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></scroll-view>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></view>
</template><swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>男<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>女<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>保密<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper><swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper>地址: {{options}}<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>提交表单<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>重置表单<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{form}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>
提交表单三个条件:
1.标签中添加name
2.button添加form-type='submit'
3.form标签添加提交事件方法
组件
根目录下在components目录下创建组件文件夹，符合‘components/组件名称/组件名称.vue’目录结构
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>自定义组件<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>引入组件myitem
动态赋值子组件的属性字段props
props 可以是数组或对象，用于接收来自父组件的数据
新闻标题组件
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{title}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>新闻二标题<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>组件中data属性:{{commonData}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>组件中<view>data属性随机值只加载一次:{{randomNum}}</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>组件中数组类型:{{list}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>组件中Object类型:{{obj}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>使用组件
export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>newBigTitle: "demo4新闻大标题"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
1.组件中定义props属性字段
2.组件中使用props属性
3.引入组件，赋值props属性值
组件中的数组类型和Object类型，必须使用function函数返回。
VUE语法
data 属性
data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
data: 初始化页面属性值
//正确用法，使用函数返回对象<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: 'Hello'<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>//错误写法，会导致再次打开页面时，显示上次数据<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: 'Hello'<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>//错误写法，同样会导致多个组件实例对象数据相互影响<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>const obj = {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: 'Hello'<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>obj<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}数据不会自动销毁，再次打开该页面时，会显示上次数据
<view>data属性随机值只加载一次:{{randomNum}}</view>export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"randomNum": Math.random().toFixed(2)<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}刷新页面重新加载
指令
v-if/v-else
<view v-if="state">显示</view>
<view v-else>不显示</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: 'Hello',<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>state: true<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}},
v-show
<view v-if="state">显示</view>
<view v-else>1</view>
<view v-show="state">v-show展示</view>
<view v-show="!state">v-show不展示</view>
v-show: 通过判断属性值真假，使用css样式控制内容是否显示
v-for循环
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>产品:{{item.name}} {{index}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>价格:{{item.price}} {{index}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{key}}: {{value}},脚标: {{index}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: 'Hello',<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>state: true,<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>products: [{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>name: "好物",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>price: "20.18"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>name: "好物1",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>price: "20.19"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>forObject: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>name: "张三",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>age: "29"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>]<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>v-for会遍历标签及其子内容
v-html标签
htmlStr: "<h1>Hello</h1>",
title: 'Hello',
v-bind动态绑定
v-bind: 动态绑定组件中的属性值
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>image: "/static/img/小猫测试.jpeg",v-on 指令
指的是事件
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{title}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{title}}class与style绑定
export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>bgcolor: "#000"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>state: true<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}.myclass{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>width: 200rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>height: 200rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>border: 1rpx solid red;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>background: blue;}.box {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>width: 200rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>height: 200rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>border: 1rpx solid red;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>background: red;}
动态指定myclass生效，背景色为蓝色，但仍被box样式覆盖了。说明动态指定的样式优先级低于静态样式的
使用三元表达式使类样式生效
<viewv-bind:>222</view>导航栏高亮显示
默认首页tab背景色红色，选中tab背景色变为红色，其他tab无背景色
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{item.name}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>activeIndex: 0,<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>navs: [{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>name: "首页"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>name: "介绍"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>name: "产品"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>]<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>methods: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>activeNav(index) {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.activeIndex = index;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}.nav {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 子标签内容展示在同一行<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>display: flex;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>.item {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 使view的宽度在父标签中平均分布<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>flex: 1;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 内容行间距，可以让内容垂直居中<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>line-height: 100rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 水平居中<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>text-align: center;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>&.active {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>background-color: red;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
v-model双向绑定
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>标题: {{title}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>双向绑定: 修改input值，data属性值跟着改变，修改data属性值，input值也会改变。
v-model示例
<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>提交<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{message}}message: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>name: '',<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>mobile: '',<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>content: ''}.out {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>padding: 30rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>.row {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>margin-bottom: 20rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>.border {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>width: 100%;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 四个边填充10rpx<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>padding: 10rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>border: 1px solid #000;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 内填充<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>box-sizing: border-box;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 设置圆角<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>border-radius: 10rpx;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
计算属性和侦听器
计算属性computed
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{ message.split('').reverse().join('') }}在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。计算属性完全可以使用方法代替，区别在于计算属性存在缓存，对于加载不变数据计算属性性能高于方法。
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>第一次加载计算属性computeTitle值: {{computeTitle}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>第二次加载计算属性computeTitle值: {{computeTitle}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>第一次加载方法computeTitle值: {{computeTitleMethod()}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>第二次加载方法computeTitle值: {{computeTitleMethod()}}methods: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>computeTitleMethod() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return Math.random();<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}},computed: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>computeTitle() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return Math.random();<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
子组件触发自定义事件传递给父组件
子组件my-event
methods: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>onInput(e) {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 使用emit向父组件传递数据<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log("子组件输入值:" + e.detail.value);<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.$emit('customEventName', e.detail.value)<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}引入my-event
methods: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>inputValue(e) {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log("父组件接收值:" + e);<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
[*]子组件自定义事件名称
[*]父组件引入子组件
[*]父组件使用子组件定义的事件名称
[*]子组件触发事件传递到父组件
父组件引入子组件时，如果使用原生事件，需要指定事件为本地事件
如:
在使用子组件的同时，使用原生事件click，指定.native标识。
将原生事件绑定到组件
使用.native修饰符，进行修饰原生组件。
子组件向上传值案例
实现弹窗隐藏的功能
子组件my-pop弹窗
<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper>弹窗内容<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>关闭<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>父组件引入
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>点击弹出框<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>hiddenPop: true<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}},methods: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>showPopStatusClick() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.hiddenPop = false<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>shutPop(e) {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.hiddenPop = true<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}
[*]父组件默认弹窗隐藏
[*]父组件点击事件显示弹窗
[*]子组件弹窗触发自定义关闭事件
[*]父组件接收事件，关闭弹窗
.sync 修饰符
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器
使用sync修饰符，通过修改子组件的props可以修改父组件的属性值，因此在上面的案例中，可以通过修改子组件的hiddenStatus值，从而修改父组件的hiddenPop值。
子组件修改
export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>props: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>hiddenStatus: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>type: Boolean,<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>default: true<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>methods: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>shut() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view> // 子组件修改绑定值格式为update:hiddenStatus，从而修改了父组件的hiddenPop值<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.$emit('update:hiddenStatus', true);<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},}
[*]父组件使用.sync修改子组件hiddenStatus属性，从而绑定父组件的hiddenPop值
[*]子组件自定义触发事件，事件名格式为 update:子组件属性值
[*]通过子组件修改hiddenStatus值，从而修改了父组件的hiddenPop值
[*]父组件监听hiddenPop改变，动态赋值子组件props属性值，使得父组件的hiddenPop值和子组件的hiddenStatus值相同
sync修饰作用就像v-model双向绑定，只是作用在父子组件之间。
vue的生命周期
App.vue中的方法
export default {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 刷新页面会执行<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>onLaunch: function() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log('App Launch')<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 刷新页面会执行，屏幕显示页面会执行，如，浏览器查看其他标签，然后切换回该标签<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>onShow: function() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log('App Show')<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 屏幕隐藏页面会执行，如，浏览器查看其他标签<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>onHide: function() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log('App Hide')<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}}API使用
路由跳转页面
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>使用api跳转到tabbar页面demo3toTabBar() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 使用switchTab方法跳转到底部tabbar页面<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.switchTab({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>url: "/pages/demo3/demo3"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>})}页面返回
back() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 只会返回通过navigateTo打开的页面<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.navigateBack();}携带参数跳转页面传参
takeParamToView() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.navigateTo({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>url: "/pages/list/list?name=张三&age=18"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>})}list页面使用onLoad函数接收
onLoad(e) { <view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log(e)}
界面
下方弹出菜单
data() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>return {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: 'Hello',<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>list: ["三国演义", "西游记", "红楼梦"]<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}},onLoad() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 下方弹出操作菜单，可自定义菜单内容<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.showActionSheet({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>itemList: this.list,<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>success: res => {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log(this.list);<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>});},
设置导航条
onLoad() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 设置导航条<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.setNavigationBarTitle({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: '导航标题'<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>})}
设置TabBar
使用iconfont图标
iconfont网站
下载ttf文件：选中将要使用的图标添加到购物车，把购物车中的图标添加到自己的项目中
打开我的项目下载ttf文件，放到到开发项目的static目录下
代码中使用图标，复制代码，把&#x替换为\u
"tabBar": {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"iconfontSrc": "static/iconfont/iconfont.ttf",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"list": [{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"pagePath": "pages/index/index",<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>// 小程序暂不支持iconfont<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"iconfont": {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"text": "\ue60e"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"text": "首页"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>},<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>"pagePath": "pages/demo1/demo1"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>]}
动态设置 tabBar 某一项的内容
uni.setTabBarItem({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>index: 0,<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>text: '文案'})
为 tabBar 某一项的右上角添加文本。
onLoad() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.setTabBarBadge({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>index: 1,<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>text: "1"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>})}
网络
发起请求
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>换一张<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>methods: {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>showPic() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.showLoading({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>title: "加载中"<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>})<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.request({<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>url: 'https://api.thecatapi.com/v1/images/search?limit=1',<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>method: 'GET',<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>success: res => {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log(res);<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.pic = res.data.url;<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>console.log(this.pic);<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>uni.hideLoading();<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>})<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}},
新闻文章案例
列表页面
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{item.title}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{item.body}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{articleDetail.title}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{articleDetail.content}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>评论<swiper indicator-dots >
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><swiper-item>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view></swiper-item>
</swiper>{{item.name}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{item.email}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>{{item.body}}<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>
问题
图片遮住其他内容
解决方法：
z-index 较大的重叠元素会覆盖较小的元素
对导航栏样式设置: z-index: 10;
vue中返回false场景
false：布尔值 false 自然是假值。
0：数字 0 被视为假值。
""（空字符串）：空字符串被视为假值。
null：空值 null 被视为假值。
undefined：未定义值 undefined 被视为假值。
NaN：非数字值 NaN（Not-a-Number）被视为假值。
接口QPS小，频繁请求导致500的问题
getNavData和getNews调用后端接口，由于接口的QPS为1，两个方法为异步请求，导致getNews中调用接口500，在调用getNavData后，睡眠1.5s然后执行getNews方法，避免QPS小的问题
onLoad() {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.news = [];<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.getNavData();<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>setTimeout(() => {<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view><view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>this.getNews();<view>
<viewv-for="index in 3">
<image :src="image"></image>
</view><imagesrc="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>}, 1500)},开发新闻应用
代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]