uniapp中的数据绑定介绍

发布时间：2023-04-24 12:33:58 所属栏目：教程来源：

导读：在实际开发过程中，data 中定义的变量发生改变后，页面的数据也需要实时更新是一个很常见需求。这个需求的应用就是数据绑定的知识。
数据绑定还有许多其他的应用场景，也有多种表现形式。本小节我们来学习一下各种数

在实际开发过程中，data 中定义的变量发生改变后，页面的数据也需要实时更新是一个很常见需求。这个需求的应用就是数据绑定的知识。
数据绑定还有许多其他的应用场景，也有多种表现形式。本小节我们来学习一下各种数据绑定的场景以及应用。

插值表达式 {{}}

插值表达式的表现形式就是两个大括号 {{}}，我们将 data 中定义的变量放到插值表达式中，当变量发生变化时，页面上面显示的数据也会实时更新。
实例：

<template>

<span> {{ imooc }} </span>
</template>
<script>
export default{
data(){
imooc: '网'
}
}
</script>
在插值表达式中也可以使用表达式。
实例：

<span>{{ 1+1 }}</span>
<span>{{ flag ? '我是网': '我不是网' }}</span>

v-bind 动态绑定属性

插值表达式只在 HTML 的文本部分生效，如果 HTML 标签属性也想做数据绑定，就需要用到 v-bind 来做动态绑定。
实例：

<template>
<view>

<image v-bind:src="imgurl"/>

<image :src="imgurl"></image>

<image :src="isShow ? imgurl : '' "></image>
</view>
</template>
<script>
export default{
data(){
imgurl:'/static/imooc.png',
isShow:true
}
}
</script>
也可以使用 v-bind 来做动态样式的绑定。
实例：

<template>
<view>
<view :class="isRed ? 'font-red' : 'font-green'" >
{{isRed ? "我是红色" : "我是绿色"}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
isRed:false,
}
}
}
</script>
<style>
.font-red{
color: red;
}
.font-green{
color: green;
}
</style>
当 isRed 为 true 时，class 为 font-red，显示「我是红色」文本
当 isRed 为 false 时，class 为 font-green，显示「我是绿色」文本

v-on 事件绑定属性

我们用 v-on 来进行 HTML 事件绑定，事件函数定义在 methods 中，v-on: 可以省略写为 @。
实例：

<template>
<view>

<button v-on:click="showName()">点我显示名字</button>

<button @click="showName()">点我显示名字</button>
</view>
</template>
<script>
export default{
methods: {
showName () {
console.log("我是imooc")
}
}
}
</script>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!