vue指令(代码部分)

注：此部分为学习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>