uni-app(vue小程序)学习笔记

标题uni-app(vue小程序)学习笔记

1.遍历循环

xml

<view v-for="(item,index) in list":key="itme.id"> {{item.text}} //循环list的text</view>

key为不变的值！id是不可变的

js

			list:[
			{
			id:0
			text:"帅哥"
			}，
			{
			id:1
			text:"丑逼"
			}
			id:2
			text:"阿勇"
			]

2.条件编译（标签的显示和隐藏）

<view v-if="true"></view>true为显示 隐藏时将标签删除
<view v-show="true"></view>true为显示 隐藏时将样式css 的display：none；

3.计算属性(条件显示)
xml

<view>{{computed}}</view>

js

data(){
money:10000
},
computed:{
return "$"+this.money
}        //封装

---

xml

 <view v-for="(item,index) in computed":key="itme.id">item.text</view>

js

data(){
	list:[
				{
				id:0
				text:"帅哥"
				}，
				{
				id:1
				text:"丑逼"
				}
				id:2
				text:"阿勇"
				]
},
computed:{
return  this.list.filter(v=>v.id<=0)     //filter()筛选
}        //条件显示