您现在的位置是：首页 > 前端 > 后端 > VUE VUE

uni-app基本语法与事件

2020-12-09【VUE】2210人已围观

简介### 基本语法 - 在js的 `data` 中定义数据 - 在 `template` 中通过 {{ 数据 }}来显示 - 在标签的属性上通过 `:data-index='数据'` 来使用 ``` {{title}} export default { data() { return { title: "itcase", } } } ``` ### 数据循环 - 用过 `v-for` 来指定要循环的数组 - `item` 和

### 基本语法

- 在js的 `data` 中定义数据
- 在 `template` 中通过 {{ 数据 }}来显示
- 在标签的属性上通过 `:data-index='数据'` 来使用

```
<view :data-index='title'>{{title}}</view>
<scritp>
export default {
	data() {
		 return {
	 		title: "itcase",
		 }
	}
}
</script>
```

### 数据循环

- 用过 `v-for` 来指定要循环的数组
- `item` 和 `index` 分别为循环项 和 循环索引
- `:key`  指定唯一的属性，用来提高循环效率

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

```

### 条件编译

- 通过 `v-if` 来决定显示和隐藏，不适合频繁的切换
- 通过 `v-show` 来决定显示和隐藏，适合频繁的切换

### 计算属性

- 可以对 data 中的数据提供 **加工** 或者 **过滤功能**
- 通过 `computed` 来定义计算属性

```
computed: {
	// 过滤
	filterList() {
		return this.list.filter(v => v.id >= 5);
	}
	// 加工
	processList() {
		return this.list.map(v => {
			v.color = "red";
			return v;
		})
	}
}
```

### 事件传参

> 通过template中传递 `$event` 进行传递标签上的

```
<view data-index="110" @click="handleClick(1,$event)">点击测试1</view>
<view data-index="120" @click="handleClick(2,$event)">点击测试2</view>

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：uniapp设置样式与sass

下一篇：uni-app 中的组件