Vue 常见指令

本文最后更新于:2021年10月20日 下午

Vue 常见指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
<!-- v-text:在元素当中插入值 -->
<view v-text='singer'></view>
<!-- v-for:根据变量的值来循环渲染元素 -->
<view v-for="(item, index) in list">
{{item}}--{{index}}
</view>
<!-- v-if和v-else:根据表达式的真假值来动态插入和移除元素 -->
<view v-if="isShow">我会显示</view>
<view v-else>我不会显示,但是我要跟有 v-if 指令的元素并齐</view>
<!-- v-model:把input的值和变量绑定了,实现了数据和视图的双向绑定 -->
<input type="text" v-model="singer">
<!-- v-bind:绑定元素的属性并执行相应的操作 -->
<view v-bind:class="{t1: isBig}">isBig 为 true 时,该元素class类名会变为 t1</view>
<!-- 上面v-bind可以简写 : -->
<view :class="{t1: isBig}">isBig 为 true 时,该元素class类名会变为 t1</view>
<!-- v-on:监听元素事件,并执行相应的操作 -->
<view v-on:click="change">该元素绑定了点击事件</view>
<!-- 上面 v-on:可以简写 @ -->
<view @click="change">该元素绑定了点击事件</view>
</template>

<script>
export default {
data() {
return {
singer: '周杰伦',
list:[1, 2, 3, 4],
isShow: true,
isBig: true

}
},
methods: {
change () {
// ...
}
}
}
</script>
<template/><block/>
Uniapp 支持在 template 模板中嵌套 <template/><block/>,用来进行 列表渲染 和 条件渲染。
<template/><block/> 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
代码示例:
<template>
<view>
<template v-if="test">
<view>test 为 true 时显示</view>
</template>
<template v-else>
<view>test 为 false 时显示</view>
</template>
</view>

<!-- 列表渲染 -->
<block v-for="(item,index) in list" :key="index">
<view>{{item}} - {{index}}</view>
</block>
</template>


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!