uni-app：数据绑定

Posted 2022-06-11 wuwuFQ

html <template>

<view v-for="(item,index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)"
		:id="'tab' + index">
		<view :class="tabIndex === index?'pagecontrol-top-selected':'pagecontrol-top-normal'">
			item
		</view>
		<view class="pagecontrol-bottom-line" v-if="tabIndex === index">
		</view>
</view>

JS <script>

export default 

		data() 
			return 
				itemsArr: ['全部', '已预约', '已签到', '已完成'],
				tabIndex: 0,
				scrollInto: '',
				scrollH: 660,
			
		,

我们以上面的代码为例

像 itemsArr tabIndex 是个属性，那么在组件里面使用的时候就是 index = "tabIndex"，用双引号就行，在组件外面就需要两个花括号tabIndex

<view class="" data-id="tabIndex">
	
</view>

<view class="">
	tabIndex
</view>

数据的绑定就需要使用 :

<scroll-view scroll-y="true" show :style="'height:'+scrollH+'px;'">
</scroll-view>

:style 样式的高度就可以动态设定了

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系