uniapp中的数据绑定
在实际开发过程中,data 中定义的变量发生改变后,的数据也需要实时更新是很常见需求。这个需求的应用就是数据绑定的知识。
数据绑定还有许多其他的应用场景,也有多种表现形式。本小节我们来学习一下各种数据绑定的场景以及应用。
插值表达式的表现形式就是两个大括号 {{}},我们将 data 中定义的变量放到插值表达式中,当变量发生变化时,上面的数据也会实时更新。
实例:
<template>
<!-- 插值表达式中放入 imooc 这个 data 变量,当 imooc 值发生改变时,上面的值也会实时更新 -->
<span> {{ imooc }} </span>
</template>
<script>
export default{
data(){
imooc: '网'
}
}
</script>
在插值表达式中也可以使用表达式。
实例:
插值表达式只在 HTML 的文本部分生效,如果 HTML 也想做数据绑定,就需要用到 v-bind 来做动态绑定。
实例:
<template>
<view>
<!-- 完整语法 -->
<image v-bind:src="l"/>
<!-- 缩写 -->
<image :src="l"></image>
<!-- 也可以使用表达式。当isShow 变量为 true 时,;为 false 时, -->
<image :src="isShow ? l : '' "></image>
</view>
</template>
<script>
export default{
data(){
l:'/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>
@H_800_@.font-red{
color: red;
}
@H_800_@.font-green{
color: green;
}
</style>
当 isRed 为 true 时,class 为 font-red,「我是红色」文本
当 isRed 为 false 时,class 为 font-green,「我是绿色」文本
我们用 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>
我们用 v-for 来循环 data 数据,需要搭配 :key ,不然会报错。
实例:
<template>
<view>
<view v-for="(item,index) in arr" :key="index">
我的名字是:{{item.name}},我{{item.age}}岁啦~
</view>
</view>
</template>
<script>
export default{
data(){
arr: [{
name: "小",
age:
},
{
name: "大",
age: ,
},
{
name: "老",
age: ,
}
]
}
</script>
会在上面打印下面的信息:
使用 v-model 实现这些数据的双向绑定。
实例:
<template>
<view>
输入: <input @input="replaceInput" v-model="changeValue">
</view>
</template>
<script>
export default {
data() {
return {
changeValue:"我是"
}
}
}
</script>
也就是 H5 的 select ,用 :value 绑定 data 变量,当选项发生变化时,绑定的 data 变量 index 也会发生变化。
实例:
<template>
<view>
<picker @change="chooseName" :value="index" :range="names">
<view>
我的名字是:{{names[index]}}
</view>
</picker>
</view>
</template>
<script>
export default {
data () {
return {
index: ,
names: ['小', '大', '老']
}
},
methods: {
chooseName (e) {
console.log("当前选择名字的索引是:",e.detail.value)
}
}
}
</script>
说明:
@change ,在 <ra-group>
中的选中项发生变化时触发,内部由多个 <ra>
单选项目组成。
实例:
<template>
<view>
<ra-group class="ra-group" @change="raChange">
<label class="ra" v-for="(item, index) in items" :key="item.name">
<ra :value="item.name" :checked="item.checked"/> {{item.value}}
</label>
</ra-group>
</view>
</template>
<script>
export default {
data () {
return {
items: [
{name: '0', value: '小'},
{name: '1', value: '大', checked: 'true'},
{name: '2', value: '老'}
]
}
},
methods: {
raChange (e) {
console.log('ra发生change事件,携带value值为:', e.target.value)
}
}
}
</script>
ra说明@H_402_1@:
包裹在 ra-group 下面的单选项目。
数据绑定是比较重要的知识点,在开发过程中经常会用到,希望大家能好好研究这一小节,最好自己敲写一下,让自己更加了解并掌握数据绑定的各种类型以及应用情况。
本节课程我们主要学习了 中几种类型的数据绑定。本节课程的重点如下: