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

原創 God-Excious 2020-06-27 07:49

注：前言、目錄見 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-child、last-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-type、last-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>

也有比較簡潔的寫法，也可以用變量來聲明true、false

以: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-if和v-show最大的區別在於：v-if不會渲染出來，而v-show會對渲染出來的元素設置display: none;樣式

比較好的寫法應該是在template組件中聯合使用v-if、v-else-if和v-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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端開源實戰項目推薦

摘自：https://www.cnblogs.com/xzsj/p/xzsj-front-event.html 前言 這段時間一直有學員和一些正在從事前端開發工作的朋友詢問“有沒有推薦的前端開源項目？”，因爲一直忙於工作沒有時間去整理，今

碼魔 2020-12-07 14:21:33

學會“偷懶”：優秀程序員是如何減少學習的？

雲棲號資訊：【點擊查看更多行業資訊】在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！ 很多人在不同領域的學習上都存在一個相同誤區：爲了變得更優秀更專業，我需要學習儘可能多的內容，於是拼命擴充自己的任務清單。但事實上，學習內

雲棲號資訊小編 2020-07-15 12:49:53

【Echarts+Html+LayUI】同一htlm頁面，點擊不同選項，加載不同echart

遇到的坑： 問題1 加載一個之後，再點擊另一個，可能是某個模板設定的問題，導致出現重疊的情況。 問題1解決方法： // 基於準備好的dom，初始化echarts實例 var div_main = document.getEle

33 Audrey 2020-07-08 12:35:22

echarts地圖顯示不出來的原因居然是，少了一個utf-8！

33 Audrey 2020-07-08 12:35:22

js屬性變化監聽器

ming_311 2020-07-08 11:50:38

關於前端導出文件到本地時的彈窗的問題的記錄

問題描述：        最近遇到了要將網頁表格數據導出成文件保存到本地的問題，通過接口從後臺獲取了文件地址，卻發現下載時需要再進行處理，於是便去查閱了一些資料，對比之後選了一種比較合適的方式。 問題解決：        可以將以下代碼寫

zhoushuizhang 2020-07-08 11:01:42

關於Element UI中日期時間選擇器在IE瀏覽器中初始化顯示的兼容性問題

一、簡單說明        項目使用Vue+Element UI進行開發，使用了 DateTimePicker 日期時間選擇器。 二、問題描述        打開修改對話框（進行選擇日期操作可以正常顯示），在谷歌瀏覽器中初始化時能夠顯示日

zhoushuizhang 2020-07-08 11:01:42

數據可視化WebSocket實現----聊聊我的實現思路

數據可視化項目，從第一個探索版到現在的比較成熟穩定的實現架構 ，我將在這篇文章詳細地說明一下現階段我實現的基本原理和數據通信方式。 後臺定時器觸發演變 在進行第一個電子看板項目的研發過程中，我的實現思路比較簡單，當時選用的只

BlackFox丶 2020-07-08 10:32:24

說好的精通React框架，這些技巧學到家了嗎（上）

動態綁定className 原理：通過三元表達式控制className值。 render(){ const flag=true return ( <div className={flag ? "active" : "no-

椰卤工程师 2020-07-08 08:39:03

初級前端看了撓頭，高級工程師笑笑不說話，你會寫多少？

前端開發有時會處理一部分後臺返回的數據，或者根據數據判斷做一些處理。 這個時候就非常有必要將一些常用的工具類封裝起來。 本文根據常用的一些工具類封裝了 59 個方法,當然還有很多用的較少前期沒有錄入，後面會繼續補充。 arr 1.

椰卤工程师 2020-07-08 08:39:03

見多識廣：JavaScript中的錯誤類型，別再一臉沒見過bug的樣子

RangeError 當數字超出允許的值範圍時，將拋出此錯誤。 const l = console.log const arr = [90,88] arr.length=90**99 我們有一個帶有兩個元素的arr。接下來，我

椰卤工程师 2020-07-08 08:39:03

踩坑：Element-ui中el-dialog組件顯示時有蒙層（遮罩層）怎麼破？

到底是什麼問題？ 沒錯就是這樣，就像上圖一樣，上傳完圖片需要預覽時，圖片被蒙層遮罩住了。 下面是整個組件的代碼：圖片上傳、預覽、刪除，組件方法可以直接去Element-ui官方文檔查看。 <template v-slot:i

椰卤工程师 2020-07-08 08:39:03

TypeScript規則知多少

“await” 只能和 promises一起使用 可以await在非Promise的值上使用，但它是無用的且具有誤導性。await是暫停執行，直到Promise的異步代碼運行完畢。 不兼容的代碼示例： let x = 42; aw

椰卤工程师 2020-07-08 08:39:02

GridPanel添加按鈕列和響應函數

先介紹一下在grid面板添加按鈕列的方法，這種方法也比較常用吧。只展示前端的編程哦，後臺的java代碼太多太累贅了，涉及到的ajax等等數據交互，就當作是個alert函數看待吧~ 上菜了，代碼如下。 var colmldetail=new

seedingly 2020-07-08 02:17:46

向ext的form表單元素添加click監聽事件

首先有這麼一個form。 authform = new Ext.form.FormPanel({ id:'authform', xtype:'form', url:fullpath+'/esb/EsbServiceAuthA

seedingly 2020-07-08 02:17:36