vue - 1 渲染

以uniapp为模版学习vue

• 条件渲染

<template>
	<view>
		<view><text>标题:{{title}}</text></view>
		<view><text>数字: {{num}}</text></view>
		<view><text>数组: {{arr}}</text></view>
		<view><text>数组下标: {{arr[1]}}</text></view>
		<view><text>对象: {{person}}</text></view>
		<view><text>对象属性: {{person.name}}</text></view>
		<view><text>---华丽的分割线---</text></view>
		<view>
			<text v-if="state === true">state 是 true 显示</text>
			<text v-else>state 是 false 隐藏</text>
		</view>
		<view>
			<text v-if="day === '万圣节'">万圣节</text>
			<text v-else-if="day === '圣诞节'">圣诞节</text>
			<text v-else>其他节日</text>
		</view>
		<view>
			<text v-show="isShow === true">v-show 显示</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "欢迎来到uniapp",
				num:123,
				arr:["a","b","c",1,2,3],
				person:{name:"roy",age:18},
				state:false,
				day:"圣诞节",
				isShow:true
			};
		}
	}
</script>

<style lang="scss">

</style>

• 列表渲染

<view v-for="(item,index) in goods" :key="item.id">
    <text>索引:{{index}} {{item.title}} - {{item.price}}</text>
</view>
goods:[{id:1,title:"商品1",price:22.5},
{id:2,title:"商品2",price:23.5}]