欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談VUE uni-app 模板語法

 更新時間:2021年10月19日 16:42:58   作者:上晴下雪  
這篇文章主要介紹了uni-app 的模板語法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

1.v-bind(簡寫 :)

組件屬性中要使用data中定義的數(shù)據(jù)變量,或組件屬性要使用表達(dá)式,需用v-bind指定

簡寫 :

2.v-on(簡寫@)

監(jiān)聽DOM事件

click.stop 可以阻止事件穿透

3.v-model

數(shù)據(jù)雙向綁定

4.v-if,v-else-if,v-else

條件判斷,決定某個內(nèi)容是否掛載

5.v-show

條件判斷,決定某個內(nèi)容是否顯示

6.三元運算符

7.空標(biāo)簽 block

8.v-for:列表渲染

<template>
	<view v-bind:class="msg" v-bind:data="1+2">
		{{msg}} world!-{{num}}
		<button v-on:click="show">點我</button>
		<input v-model="msg" />
		<view v-if="flag">vue</view>
		<view v-else>H5</view>
		<view>{{flag ? '顯示':'隱藏'}}</view>
		<block>
			<text>block 空標(biāo)簽 </text>
		</block>

		<view v-for="(item, index) in arr">{{index+1}}:{{item}}</view>
		<view @click="c1">
			父級
			<view @click.stop="c2">子級</view>
		</view>
	</view>
	
</template>
<script>
export default{
	//初始化數(shù)據(jù),
	//data:{},使用對象形式數(shù)據(jù)不會發(fā)生變化,不推薦
	data(){
		return {
			msg:'hello',//變量
			arr:['vue','H5','CSS'],//數(shù)組
			flag:true,//布爾值
			num: 1
		}
	},
	onLoad(){
		setTimeout(()=>{
			this.num++;
		},2000)
	},
	methods:{
		show(){
			console.log('點了');
			this.flag=!this.falg;
		},
		c1(){
			console.log('我是父級');
		},
		c2(){
			console.log('我是子級');
		}
	}
}
</script>

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • vite與xcode環(huán)境變量配置記錄詳解

    vite與xcode環(huán)境變量配置記錄詳解

    這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法

    vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法

    這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號要怎么解決,項目場景我是傳遞一個string字符給后端時候報錯,隨手把這個問題記錄下來了,需要的朋友可以參考下解決方案
    2022-11-11
  • vue請求接口并且攜帶token的實現(xiàn)

    vue請求接口并且攜帶token的實現(xiàn)

    本文主要介紹了vue請求接口并且攜帶token的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • 解決vue+webpack項目接口跨域出現(xiàn)的問題

    解決vue+webpack項目接口跨域出現(xiàn)的問題

    這篇文章主要介紹了解決vue+webpack項目接口跨域出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 詳解vue中配置代理(解決跨域請求)

    詳解vue中配置代理(解決跨域請求)

    這篇文章主要為大家詳細(xì)介紹了vue如何通過配置代理來解決跨域請求的問題,文中的示例代碼講解詳細(xì),對我們深入學(xué)習(xí)vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-08-08
  • vue 2.0路由之路由嵌套示例詳解

    vue 2.0路由之路由嵌套示例詳解

    這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • vue項目如何去掉URL中#符號的方法

    vue項目如何去掉URL中#符號的方法

    在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項目如何去掉URL中#符號的相關(guān)資料,文中通過實例代碼的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • vuex實現(xiàn)購物車的增加減少移除

    vuex實現(xiàn)購物車的增加減少移除

    這篇文章主要為大家詳細(xì)介紹了vuex實現(xiàn)購物車的增加減少移除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • 解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題

    解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題

    這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue 巧用過渡效果(小結(jié))

    vue 巧用過渡效果(小結(jié))

    這篇文章主要介紹了vue 巧用過渡效果(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09

最新評論