uni-app:第二章 基本指令學習

<template>
	<view class="content">
		<!-- 
		 1. -》》》》》》基本指令學習
		 -->
		<text>我是主頁</text>
		{{"HUANG"}}
		<view>{{msg}}</view>
		<view>{{msg+"-HUANG"}}</view>
		<!-- 運算符在原生小程序無法使用的,uni可以貼近前端 -->
		<view>{{"Huang".indexOf("ua")!==-1?"YES":"NO"}}</view>
		<view>{{"我愛你uni-app".slice(0,4)}}</view>
		<view>{{false||""||"大爺個蛋"||"運算符輸出第一個正確的值"}}</view>
		<view> 插值直接調用方法 {{testMethod()}}</view>
		<img :src="url" />
		<image :src="url"></image>
		<!-- 屬性綁定 -->
		<view class="box1">我使用的是box1</view>
		<view :class="'box'+2">test</view>
		<view :class="{box3:true}">屬性綁定</view>
		<view :class="['box1','box2']">屬性綁定1</view>
		<view class="box1,box2">我使用的是box2</view>
		<view :class="isok?'box1':'box3'">屬性綁定2</view>
		<view :class="[{box1:true},{box2:false}]">屬性綁定3</view>
		
		<!-- 綁定動態類 -->
		<view :style="{width:'100px',height:'100px',background:'red'}"></view>
		<view :style="[{width:'100px',height:'100px',background:'green'}]"></view>
		<view style="width:100px;height: 100px;background: #007AFF;"></view>
		<!-- 數組 -->
		<view>
			<view v-for="(item,index) in names"
			:key="index"
			@click="setItemClass(index)"
			:class="{'box1':index===currentIndex}">
				{{item}}
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isok:true,
				msg: 'huangxiaoguo',
				url: 'http://huangxiaoguo.club/my_res/certificate_of_honor.png',
				names:['aaa','bbb','ccc','ddd'],
				currentIndex:1
			
			}
		},
		onLoad() {
			
		},

		methods: {
			testMethod(){
				return "我是插值直接調用的方法"
			},
			setItemClass(index){
				this.currentIndex=index;
			}
		},
		onPullDownRefresh: () => {
			console.log("onPullDownRefresh");
		},
		onReachBottom: () => {
			console.log("onReachBottom");
		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.box1 {
			color: red;
		}

		.box2 {
			color: #007AFF;
		}
		.box3{
			color: #4CD964;
		}
	}
</style>