前端開發~uni-app ·[項目-仿糗事百科] 學習筆記 ·007【uni-app和vue.js基礎快速上手】

注:前言、目錄見 https://god-excious.blog.csdn.net/article/details/105312456

【014】view和text組件和動畫使用

常見的尺寸單位

官方文檔 https://uniapp.dcloud.io/frame?id=尺寸單位

view組件

視圖容器

  • 屬性說明

    屬性名 類型 默認值 說明
    hover-class String none 指定按下去的樣式類。當 hover-class=“none” 時,沒有點擊態效果
    hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態
    hover-start-time Number 50 按住後多久出現點擊態,單位毫秒
    hover-stay-time Number 400 手指鬆開後點擊態保留時間,單位毫秒
  • 說明

    1. 可以給浮動時的class屬性設置浮動時的CSS樣式
    2. 如果要引入動畫,可以在浮動前的class中加入animated,在浮動後的class中加入樣式對應的class名

text組件

文本

  • 屬性說明

    屬性名 類型 默認值 說明 平臺差異說明
    selectable Boolean false 文本是否可選
    space String 顯示連續空格 App、H5、微信小程序
    decode Boolean false 是否解碼 App、H5、微信小程序
  • space 值說明

    說明
    ensp 中文字符空格一半大小
    emsp 中文字符空格大小
    nbsp 根據字體設置的空格大小
  • 說明

    1. 可以用換行符\n換行
    2. 設置selectable屬性以設置文字能否被選中,這個屬性前要加上英文冒號:
    3. 可以在文本內容中使用相應的space值來設置相應的空格,形如 

使用示例

<template>
	<view>
		<view class="view-box animated" hover-class="view-box-hover flash" hover-stay-time="800">
			第一個view
		</view>
		
		<text :selectable="true">這是text\n這是text組件\n這是text組件\n</text>
	</view>
</template>

<script>
	
</script>

<style>
	.view-box {
		width: 200upx;
		height: 200upx;
		background-color: #007AFF;
	}
	
	.view-box-hover {
		background-color: #8A6DE9;
	}
</style>

【015】uni-app的CSS3選擇器

官方文檔 https://uniapp.dcloud.io/frame?id=選擇器

注意點

  1. 常規的CSS選擇器,如類選擇器、id選擇器、標籤選擇器、子代選擇器、多重選擇器等,都是可以正常使用的

  2. 如果要選中在父標籤下的第ii個子標籤,判斷其是否滿足選中條件後,再給予樣式,可以用nth-child()

    <template>
    	<view>
    		<view class="box">
    			<text>2333</text>
    			<view>1</view>
    			<view>2</view>
    			<view>3</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	
    </script>
    
    <style>
    	.box {
    		background-color: #0A98D5;
    		width: 500upx;
    		height: 500upx;
    		margin: 100upx;
    		padding: 50upx;
    		color: #ffffff;
    	}
    	
    	.box view {
    		font-size: 50upx;
    	}
    	
    	.box>view:nth-child(1) {
    		background-color: red;
    	}
    	
    	.box>view:nth-child(2) {
    		background-color: green;
    	}
    	
    	.box>view:nth-child(3) {
    		background-color: yellow;
    	}
    </style>
    
  3. 如果要選中在父標籤下的第ii個滿足選中條件的子標籤,給予樣式,可以用nth-of-type()

    <template>
    	<view>
    		<view class="box">
    			<text>2333</text>
    			<view>1</view>
    			<view>2</view>
    			<view>3</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	
    </script>
    
    <style>
    	.box {
    		background-color: #0A98D5;
    		width: 500upx;
    		height: 500upx;
    		margin: 100upx;
    		padding: 50upx;
    		color: #ffffff;
    	}
    	
    	.box view {
    		font-size: 50upx;
    	}
    	
    	.box>view:nth-of-type(1) {
    		background-color: red;
    	}
    	
    	.box>view:nth-of-type(2) {
    		background-color: green;
    	}
    	
    	.box>view:nth-of-type(3) {
    		background-color: yellow;
    	}
    </style>
    
    
  4. 如果要選中在父標籤下的第一個子標籤、最後一個子標籤,判斷其是否滿足選中條件後,再給予樣式,可以用first-childlast-child

    <template>
    	<view>
    		<view class="box">
    			<text>2333</text>
    			<view>1</view>
    			<view>2</view>
    			<view>3</view>
    			<view>4</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	
    </script>
    
    <style>
    	.box {
    		background-color: #0A98D5;
    		width: 500upx;
    		height: 500upx;
    		margin: 100upx;
    		padding: 50upx;
    		color: #ffffff;
    	}
    	
    	.box view {
    		font-size: 50upx;
    	}
    	
    	.box>view:first-child {
    		background-color: red;
    	}
    	
    	.box>view:last-child {
    		background-color: pink;
    	}
    </style>
    
  5. 如果要選中在父標籤下的第一個、最後一個滿足選中條件的子標籤,給予樣式,可以用first-of-typelast-of-type

    <template>
    	<view>
    		<view class="box">
    			<text>2333</text>
    			<view>1</view>
    			<view>2</view>
    			<view>3</view>
    			<view>4</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	
    </script>
    
    <style>
    	.box {
    		background-color: #0A98D5;
    		width: 500upx;
    		height: 500upx;
    		margin: 100upx;
    		padding: 50upx;
    		color: #ffffff;
    	}
    	
    	.box view {
    		font-size: 50upx;
    	}
    	
    	.box>view:first-of-type {
    		background-color: red;
    	}
    	
    	.box>view:last-of-type {
    		background-color: pink;
    	}
    </style>
    
  6. 奇偶選擇器

    寫法一

    <template>
    	<view>
    		<view class="box">
    			<!-- <text>2333</text> -->
    			<view>1</view>
    			<view>2</view>
    			<view>3</view>
    			<view>4</view>
    			<view>5</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	
    </script>
    
    <style>
    	.box {
    		background-color: #0A98D5;
    		width: 500upx;
    		height: 500upx;
    		margin: 100upx;
    		padding: 50upx;
    		color: #ffffff;
    	}
    	
    	.box view {
    		font-size: 50upx;
    	}
    	
    	.box>view:nth-of-type(2n-1) {
    		background-color: red;
    	}
    	
    	.box>view:nth-of-type(2n) {
    		background-color: green;
    	}
    </style>
    

    寫法二

    <template>
    	<view>
    		<view class="box">
    			<text>2333</text>
    			<view>1</view>
    			<view>2</view>
    			<view>3</view>
    			<view>4</view>
    			<view>5</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	
    </script>
    
    <style>
    	.box {
    		background-color: #0A98D5;
    		width: 500upx;
    		height: 500upx;
    		margin: 100upx;
    		padding: 50upx;
    		color: #ffffff;
    	}
    	
    	.box view {
    		font-size: 50upx;
    	}
    	
    	.box>view:nth-of-type(odd) {
    		background-color: red;
    	}
    	
    	.box>view:nth-of-type(even) {
    		background-color: green;
    	}
    </style>
    

【016】flex佈局快速上手

官方文檔 https://uniapp.dcloud.io/frame?id=flex佈局

知識點

樣式 簡介 備註
display: flex; 設置flex容器
flex-direction: colomn; 設置flex容器的主軸方向爲縱向 默認爲橫向(row
flex-direction: row; 設置flex容器的主軸方向爲橫向 默認爲橫向(row
flex-wrap: wrap; 設置flex容器根據flex元素大小進行換行
flex-wrap: wrap-reverse; 設置flex容器根據flex元素大小進行反向換行
justify-content: center; 設置flex容器中的flex元素在主軸方向上居中
justify-content: space-between; 設置flex容器中的flex元素在主軸方向上兩端對齊
justify-content: flex-start; 設置flex容器中的flex元素在主軸方向上整體靠着起始位置排列
justify-content: flex-end; 設置flex容器中的flex元素在主軸方向上整體靠着末尾位置排列
align-items: center; 設置flex容器中的flex元素在交叉軸方向上居中
align-items: stretch; 設置flex容器中的flex元素在交叉軸方向上自動填充 需要去除高度設置才能生效
flex-shrink: 0; 設置flex容器中的flex元素不能被自動伸縮 默認爲1
flex-shrink: 1; 設置flex容器中的flex元素可以被自動伸縮 默認爲1
flex: n 設置flex容器中的flex元素的佔位權重

注:flex佈局使用以下兩行排列方式使得flex元素整體居中

.box-item {
    /* flex佈局下,設置以下兩條語句,自動水平、垂直居中 */
    justify-content: center;
    align-items: center;
}

使用示例

<template>
	<view>
		<view class="box">
			<view class="box-item">1</view>
			<view class="box-item">2</view>
			<view class="box-item">3</view>
			<view class="box-item">4</view>
			<view class="box-item">5</view>
			<view class="box-item">6</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		width: 100%;
		height: 500upx;
		border: 1upx solid gray;
		
		display: flex;
		
		/* 設置flex佈局的主軸爲縱向(默認爲橫向) */
		/* flex-direction: column; */
		
		/* flex佈局下,設置以下兩條語句,自動水平、垂直居中 */
		/* justify-content: center; */
		/* align-items: center; */
		
		/*  自動換行 */
		/* flex-wrap: wrap; */
		/*  反向自動換行 */
		/* flex-wrap: wrap-reverse; */
		/* 水平(主軸)方向-居中 */
		/* justify-content: center; */
		/* 水平(主軸)方向-兩端對齊 */
		/* justify-content: space-between; */
		/* 水平(主軸)方向-擠到左邊 */
		/* justify-content: flex-start; */
		/* 水平(主軸)方向-擠到右邊 */
		/* justify-content: flex-end; */
		
		/* 垂直(交叉軸)方向-居中 */
		/* align-items: center; */
		/* 垂直(交叉軸)方向-填充(需要將設置的高度去除才能生效) */
		/* align-items: stretch; */
		/* 垂直(交叉軸)方向- */
		align-items: center;
		
		 
	}
	
	.box-item {
		color: #fff;
		height: 200upx;
		
		/* width: 200upx; */
		/* 平均分配寬度 */
		/* flex: 1; */
		
		line-height: 200upx;
		font-size: 30upx;
		font-weight: bold;
		
		display: flex;
		/* flex佈局下,設置以下兩條語句,自動水平、垂直居中 */
		justify-content: center;
		align-items: center;
	}
	
	.box-item:nth-of-type(odd) {
		background-color: #007AFF;
	}
	
	.box-item:nth-of-type(even) {
		background-color: #09BB07;
	}
	
/* 	.box-item:nth-of-type(1) {
		// 設置flex元素的壓縮情況,默認值爲1,代表可以被壓縮;0代表不會被壓縮
		flex-shrink: 0;
	} */
	
	/* 以下三個選擇器設置了主軸上的權重,會根據比例分配大小 */
	.box-item:nth-of-type(1) {
		flex: 1;
	}
	
	.box-item:nth-of-type(2) {
		flex: 2;
		
		/* 將某個flex元素單獨放到底部 */
		align-self: flex-end;
	}
	
	.box-item:nth-of-type(3) {
		flex: 3;
	}
	
</style>

【017】數據渲染

數據定義

數據需要定義在script腳本的data()中進行返回,以鍵值對的形式呈現(或者說就是json對象)。

<template>
	<view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
	}
</script>

<style>
    
</style>

數據使用

數據在template中可以用雙括號{{數據名}}引用相應的數據,如果數據是一個對象,可以用.來引用其中的數據。

<template>
	<view>
		<view class="box">
			<view class="box-item">測試一{{username}}</view>
			<view class="box-item">測試二{{userinfo.username}}</view>
			<view class="box-item">測試三</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
	}
</script>

<style>
	.box {
		border: 1upx solid #333;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
	
	.box>view {
		background-color: #007AFF;
		border: 1upx solid #FFFFFF;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 40upx;
		flex: 1;
		height: 500upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

數據修改

可以在script腳本的methods裏面定義函數,觸發事件時動態調用。

在函數中通過this來使用data()中返回的數據。

<template>
	<view>
		<view class="box">
			<view class="box-item">測試一{{username}}</view>
			<view class="box-item">測試二{{userinfo.username}}</view>
			<view class="box-item">測試三</view>
		</view>
		<button type="default" @tap="changeUsername('LOL')">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
		methods: {
			changeUsername:function(name){
				this.userinfo.username=name;
			}
		},
	}
</script>

<style>
	.box {
		border: 1upx solid #333;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
	
	.box>view {
		background-color: #007AFF;
		border: 1upx solid #FFFFFF;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 40upx;
		flex: 1;
		height: 500upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

另外一種比較實用的方式是,給組件的class屬性動態綁定,當觸發事件時修改class的值,從而達到動態修改樣式的效果。

<template>
	<view>
		<view :class="class2">
			<view class="box-item">測試一{{username}}</view>
			<view class="box-item">測試二{{userinfo.username}}</view>
			<view class="box-item">測試三</view>
		</view>
		<button type="default" @tap="changeUsername('LOL')">修改名字</button>
		<button type="default" @tap="changeClassname()">修改樣式</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class2: "box",
				username: "hahahaha",
				userinfo: {
					username: "emmm",
				}
			}
		},
		methods: {
			changeUsername:function(name){
				this.userinfo.username=name;
			},
			changeClassname:function(){
				this.class2="box2";
			}
		},
	}
</script>

<style>
	.box {
		border: 1upx solid #333;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
	
	.box>view {
		background-color: #007AFF;
		border: 1upx solid #FFFFFF;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 40upx;
		flex: 1;
		height: 500upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		border: 1upx solid red;
		height: 500upx;
		width: 100%;
		
		display: flex;
	}
</style>

【018】class和style綁定

官方文檔 https://uniapp.dcloud.io/use?id=class-與-style-綁定

直接引入

傳統的形式,沒有任何判斷,直接將所有的樣式進行引入。

:class="['類名1', '類名2']"這樣的形式添加。

<template>
	<view>
		<view class="box" :class="['bor', 'fs']">box</view>
	</view>
</template>

<script>
	
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
	}
</style>

和變量動態綁定

用變量值來標識一些類名,方便以後動態進行修改。

:class="[類名變量1, 類名變量2]"這樣的形式添加。

<template>
	<view>
		<view class="box" :class="[class1, class2]">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class1: "bor",
				class2: "fs"
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
	}
</style>

可以在其中使用三目運算符篩選類名。

:class="[條件表達式?類名變量1:'', 條件表達式?類名變量2:類名變量3]"這樣的形式添加。

<template>
	<view>
		<!-- 年齡大於10歲時,獲得class1的邊框樣式,否則無 -->
		<!-- 性別爲女時,獲得class2的字體樣式,否則無 -->
		<view class="box" :class="[age>10?class1:'', gender==`女`?class2:'']">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class1: "bor",
				class2: "fs",
				age: 11,
				gender: '女'
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
		color: pink;
	}
</style>

也有比較簡潔的寫法,也可以用變量來聲明truefalse

:class="{'類名':布爾變量}"這樣的形式添加。

<template>
	<view>
		<!-- 變量isActive爲真時,獲得class1的邊框樣式,否則無 -->
		<!-- 變量isfs爲真時,獲得class2的字體樣式,否則無 -->
		<view class="box" :class="{'bor':isActive, 'fs':isfs}">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class1: "bor",
				class2: "fs",
				age: 11,
				gender: '女',
				isActive: false,
				isfs: true
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bor {
		border: 10upx solid #007AFF;
	}
	
	.fs {
		font-size: 80upx;
		color: pink;
	}
</style>

style屬性引入

可以通過style屬性將樣式引入,同樣可以使用變量進行調節。

:style="{'樣式名1': '樣式值1', '樣式名1': 變量}"這樣的形式添加。

<template>
	<view>
		<view class="box" :style="{'color': Color, 'font-size': Size+'px'}">box</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Color: "#333",
				Size: 50
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 350upx;
		height: 350upx;
		border-radius: 50%;
		font-size: 50upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

【019】條件渲染

給標籤加上v-if屬性進行條件渲染,一般使用v-if="布爾變量"

<template>
	<view>
		<view class="box" v-if="isshow">box</view>
		<button type="default" @tap="changeShow()">隱藏</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
			}
		},
	}
</script>

<style>
	.box {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

當然,也可以用條件表達式v-if="(條件表達式)"

<template>
	<view>
		<view class="box" v-if="(age>20)">{{age>30?'中年人':'年輕人'}}</view>
		<button type="default" @tap="changeAge()">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				age: 10
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
			},
			changeAge:function(){
				this.age+=11;
			},
		},
	}
</script>

<style>
	.box {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

但是上面這些直接在view組件上添加v-if屬性的方式,官方是不推薦的。

類似的方式還有v-show屬性。

<template>
	<view>
		<view class="box" v-show="(age>20)">{{age>30?'中年人':'年輕人'}}</view>
		<button type="default" @tap="changeAge()">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				age: 10
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
			},
			changeAge:function(){
				this.age+=11;
			},
		},
	}
</script>

<style>
	.box {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

v-ifv-show最大的區別在於:v-if不會渲染出來,而v-show會對渲染出來的元素設置display: none;樣式

比較好的寫法應該是在template組件中聯合使用v-ifv-else-ifv-else這些屬性。

<<template>
	<view>
		<view>
			<template v-if="isshow">
				<view class="box1">box1</view>
			</template>
			<template v-else-if="isshow2">
				<view class="box2">box2</view>
			</template>
			<template v-else>
				<view class="box3">box3</view>
			</template>
			<button type="default" @tap="changeShow()">隱藏</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				isshow2: true
			}
		},
		methods: {
			changeShow:function(){
				this.isshow=!this.isshow;
				this.isshow2= !this.isshow && !this.isshow2;
			},
			changeAge:function(){
				this.age+=11;
			},
		},
	}
</script>

<style>
	.box1 {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		background-color: #09BB07;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box3 {
		background-color: #8A6DE9;
		color: #FFFFFF;
		font-size: 50upx;
		width: 350upx;
		height: 350upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

【020】列表渲染

官方文檔 https://uniapp.dcloud.io/use?id=列表渲染

一般形式

形如

<view class="font" v-for="(val,index) in 列表變量" :key="index">
    <!-- 類似{{index}} - {{val}}這樣的 --> 
</view>

遍歷一維數組

讀取列表中變量

<template>
	<view>
		<!-- 循環一維數組 -->
		<view class="font" v-for="(val,index) in list1" :key="index">
			{{index}} - {{val}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: ["籃球", "足球", "羽毛球"]
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

讀取列表中對象

<template>
	<view>
		<!-- 循環一維數組 -->
		<view class="font" v-for="(val,index) in list2" :key="index">
			{{index}} - {{val.name}} - {{val.id}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [
					{ name: "籃球", id: "lanqiu"},
					{ name: "足球", id: "zuqiu" },
					{ name: "羽毛球", id: "yumaoqiu" }
				]
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

遍歷二維數組

<template>
	<view>
		<!-- 循環二維數組 -->
		<view class="font" v-for="(val1,index1) in list3" :key="index1">
			<view class="font">{{val1.name}}</view>
			<view class="font" v-for="(val2,index2) in val1.list" :key="index2">
				{{index2}} - {{val2}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [
					{
						name: "廣東",
						list: ["廣州", "深圳", "佛山"]
					},
					{
						name: "四川",
						list: ["不知道1", "不知道2"]
					}
				]
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

遍歷對象

<template>
	<view>
		<!-- 循環對象 -->
		<view class="font" v-for="(val,key) in objlist" :key="key">
			{{key}} - {{val}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				objlist: {
					name1: "籃球",
					name2: "足球",
					name3: "羽毛球"
				}
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

注:條件渲染建議使用template組件,列表渲染建議使用block組件

<template>
	<view>
		<!-- 循環對象 -->
		<block v-for="(val,key) in objlist" :key="key">
			<view class="font">
				{{key}} - {{val}}
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				objlist: {
					name1: "籃球",
					name2: "足球",
					name3: "羽毛球"
				}
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

【021】事件處理器

官方文檔 https://uniapp.dcloud.io/use?id=事件處理器

點擊事件處理

通過@tap屬性綁定觸發點擊後的事件處理。

另外,可以用在事件處理中使用console.log()打印出一些信息,便於進行調試。

<template>
	<view>
		<view class="font">{{name}}</view>
		<view class="box" @tap="clickevent()">按鈕</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "哈哈哈"
			}
		},
		methods: {
			clickevent:function(){
				console.log(this.name);
			}
		},
	}
</script>

<style>
	.box {
		background-color: #09BB07;
		color: #FFFFFF;
		width: 80%;
		height: 80upx;
		margin: 0 auto;
		font-size: 50upx;
		border-radius: 30upx;
		border: 1upx, solid, red;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.font {
		font-size: 50upx;
	}
</style>

阻止事件冒泡

像是下面這樣的代碼,就會出現“點擊了裏面的時候,同時也點中了外面”這樣的情況。這就是所謂的“冒泡”,從裏面冒泡到外面。

<template>
	<view>
		<view class="box1" @tap="box1event()">
			外面
			<view class="box2" @tap="box2event()">裏面</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			box1event:function(){
				console.log("點擊了外面");
			},
			box2event:function(){
				console.log("點擊了裏面");
			}
		},
	}
</script>

<style>
	.box1 {
		width: 100%;
		height: 500upx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		width: 300upx;
		height: 300upx;
		background-color: #09BB07;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

要想阻止事件冒泡也很簡單,只需要將@tap屬性改成@tap.stop就可以阻止其默認行爲。

<template>
	<view>
		<view class="box1" @tap.stop="box1event()">
			外面
			<view class="box2" @tap.stop="box2event()">裏面</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			box1event:function(){
				console.log("點擊了外面");
			},
			box2event:function(){
				console.log("點擊了裏面");
			}
		},
	}
</script>

<style>
	.box1 {
		width: 100%;
		height: 500upx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box2 {
		width: 300upx;
		height: 300upx;
		background-color: #09BB07;
		color: #FFFFFF;
		font-size: 40upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

【022】監聽屬性

監聽屬性需要在script腳本的watch中定義屬性變化後處理的函數。當被監聽的屬性發生變化後,將自動調用處理的函數。

<template>
	<view>
		<view class="font">{{num}}</view>
		<view class="font">{{num>10?'優秀':''}}</view>
		<button type="primary" @tap="change()">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0
			}
		},
		methods: {
			change:function(){
				this.num++;
			}
		},
		// 用watch監聽屬性
		watch: {
			num:function(val){
				console.log(val);
			}
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

【023】計算屬性

官方文檔 https://uniapp.dcloud.io/use?id=計算屬性

比如下面的例子,體重的顯示需要根據不同大小設置不同的顯示單位

<template>
	<view>
		<view class="font">
			{{ (weight>1000) ? (weight/1000+'kg'): (weight+'g')}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weight: 900  // 體重
			}
		},
		methods: {
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>

但是把這些計算放到頁面上是不太好的,不方便去維護。

計算屬性需要在script腳本的computed中定義,有點像script腳本的method裏面的函數,但是計算結果過需要return回去。

計算屬性的調用和data的調用差不多,在{{}}被使用,但是不需要加上小括號()

<template>
	<view>
		<view class="font">
			{{ ZHweight }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weight: 1900  // 體重
			}
		},
		computed: {
			ZHweight:function(){
				return (this.weight>1000) ? (this.weight/1000+'kg') : (this.weight+'g');
			}
		},
		methods: {
		},
	}
</script>

<style>
	.font {
		font-size: 50upx;
	}
</style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章