uniapp条件渲染、列表渲染、事件处理

一.条件渲染

1.v-if 指令用于条件性地渲染一块内容

<view v-if="awesome">Vue is awesome!</view>

data:function() {
    return {
       awesome:true     //true或false
    }
}

2.也可以用 v-else 添加一个“else 块”

<view v-if="awesome">Vue is awesome!</view>
<view v-else>Oh no</view>

data:function() {
    return {
  		awesome:true    //为true时正常显示，为false时显示Oh no
    }
}

3.v-else-if，充当 v-if 的“else-if 块”，可以连续使用

<view v-if="type === 'A'">
	A
</view>
<view v-else-if="type === 'B'">
	B
</view>
<view v-else-if="type === 'C'">
	C
</view>
<view v-else>
	Not A/B/C
</view>

data:function() {
    return {
    type:'A'   //A或B或C  什么都不写的话则显示 Not A/B/C
    }
}

4.v-show，根据条件展示元素

<view v-show="ok">Hello!</view>

data:function() {
    return {
 	ok:true    //为true时显示Hello!，为false时则不显示
    }
}

5.v-if 与 v-show的区别
v-if 是“真正”的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。（在运行条件很少改变时使用）
v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display（none/block）。（频繁地切换时使用）

二.列表渲染

1.用 v-for 指令基于一个数组来渲染一个列表。需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<view v-for="item,index in items" :key="index">{{index}} : {{item.msg}}</view>

data:function() {
	return {
		items:[
			{msg:'Foo'},
			{msg:'Bar'}
		]
	}
}

2.在 v-for 里使用对象

<view v-for="value,key in object" :key="key">{{key}} : {{value}}</view>

object:{
	title:'How to do lists in Vue',
	author:'Jane Doe',
	publishedAt:'2020-3-10',
}

上面两例结果如下图：

三.事件处理

一.监听事件

用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
例：counter初始化为0，每点击button按钮一次+1

<button v-on:click="counter +=1">数值：{{ counter }}</button>

data:function() {
	return {
		counter:0
	}
}

二.事件处理方法

因为许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
例：为button绑定click事件，点击button时会触发greet函数，在methods属性内声明函数以及函数体
点击按钮弹出：

<button v-on:click="greet">Greet</button>

export default {
	data:function() {
		return {
			name:'uniapp'
		}
	},
	methods: {
		greet:function(){
			uni.showModal({
				content:'hi!',
				content:'this.name'
			})
		}
	}
}

也可以为greet函数传递一个实参，然后在方法中设置一个形参：

<button v-on:click="greet('abc')">Greet</button>   //abc  实参

methods: {
	greet:function(str){     // str形参
		uni.showModal({
			content:str
		})
	}
}