注:此部分为学习uni-app时接触到的vue
<template>
<view>
<view>当前标题:{{title}}</view>
<view> {{num}}</view>
<view>{{arr[2]}}</view>
<view>{{obj}}</view>
<view>{{obj.name}}</view>
----------------v-if/v-else---------------------
<view v-if="day==1">周一</view>
<view v-else-if="day==2">周二</view>
<view v-else-if="day==3">周三</view>
<view v-else-if="day==4">周四</view>
<view v-else-if="day==5">周五</view>
<view v-else-if="day==6">周六</view>
<view v-else-if="day==7">周日</view>
<view v-else>格式错误</view>
----------------v-if---------------------
<view v-if="state">uniapp</view>
<view v-else>html+css</view>
----------------v-show---------------------
<view v-show="state">控制台隐藏相关信息</view>
<view v-show="!state">html+css</view>
----------for---------------
<view v-for="(item,index) in arr" class="out">
<view class="row">{{(index+1)+"----"+item}}</view>
</view>
----------goods---------------
<view class="goods" v-for="item in goods" :key="item.id">
<view>商品名称:{{item.title}} - 商品价格:¥{{item.price}}</view>
</view>
----------for object---------------
<view v-for="(value,name,index) in obj">
{{index}} - {{name}}:{{value}}
</view>
-------------v-html---------------
<view>{{title}}</view>
<view v-html="title"></view>
v-html可以渲染html标签(小程序无法识别html标签)
<view>{{code}}</view>
<view v-html="code"></view>
-------------v-bind绑定---------------
<!-- <image v-bind:src="img"></image>
<image :src="img"></image> -->
<image :src="'../../static/logo'+item+'.png'" v-for="item in [1,2,3]"></image>
</view>
</template>
<script>
export default {
data() {
return {
img:"../../static/logo.png",
code:"<h1>HZLX</h1><em>uniapp</em>",
title:"微信小程序",
num:123,
arr:["aaa","bbb","ccc",1,2,3],
obj:{name:"张三",age:22},
state:true,
day:4,
goods:[
{
id:1,
title:"商品1",
price:22.5
},
{
id:2,
title:"商品2",
price:66.6
}
]
};
}
}
</script>
<style lang="scss">
.out{
.row{
font-size: 50rpx;
border-bottom: solid black 1rpx ;
}
}
</style>