当前位置:  首页>> 技术小册>> uniapp入门教程

1. 前言

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

2. 插值表达式 {{}}

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

  1. <template>
  2. <!-- 插值表达式中放入 imooc 这个 data 变量,当 imooc 值发生改变时,页面上面的值也会实时更新 -->
  3. <span> {{ imooc }} </span>
  4. </template>
  5. <script>
  6. export default{
  7. data(){
  8. imooc: 'uniapp'
  9. }
  10. }
  11. </script>

在插值表达式中也可以使用表达式。
实例:

  1. <span>{{ 1+1 }}</span>
  2. <span>{{ flag ? '我是uniapp': '我不是uniapp' }}</span>

3. v-bind 动态绑定属性

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

  1. <template>
  2. <view>
  3. <!-- 完整语法 -->
  4. <image v-bind:src="imgUrl"/>
  5. <!-- 缩写 -->
  6. <image :src="imgUrl"></image>
  7. <!-- 也可以使用表达式。当isShow 变量为 true 时,显示图片;为 false 时,不显示图片 -->
  8. <image :src="isShow ? imgUrl : '' "></image>
  9. </view>
  10. </template>
  11. <script>
  12. export default{
  13. data(){
  14. imgUrl:'/static/imooc.png',
  15. isShow:true
  16. }
  17. }
  18. </script>

也可以使用 v-bind 来做动态样式的绑定。
实例:

  1. <template>
  2. <view>
  3. <view :class="isRed ? 'font-red' : 'font-green'" >
  4. {{isRed ? "我是红色" : "我是绿色"}}
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. isRed:false,
  13. }
  14. }
  15. }
  16. </script>
  17. <style>
  18. .font-red{
  19. color: red;
  20. }
  21. .font-green{
  22. color: green;
  23. }
  24. </style>

当 isRed 为 true 时,class 为 font-red,显示「我是红色」文本
当 isRed 为 false 时,class 为 font-green,显示「我是绿色」文本

4. v-on 事件绑定属性

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

  1. <template>
  2. <view>
  3. <!-- 完整语法 -->
  4. <button v-on:click="showName()">点我显示名字</button>
  5. <!-- 简写 -->
  6. <button @click="showName()">点我显示名字</button>
  7. </view>
  8. </template>
  9. <script>
  10. export default{
  11. methods: {
  12. showName () {
  13. console.log("我是imooc")
  14. }
  15. }
  16. }
  17. </script>

5. v-for 循环绑定属性

我们用 v-for 来循环显示 data 数据,需要搭配 :key 属性,不然会报错。
实例:

  1. <template>
  2. <view>
  3. <view v-for="(item,index) in arr" :key="index">
  4. 我的名字是:{{item.name}},我{{item.age}}岁啦~
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default{
  10. data(){
  11. arr: [{
  12. name: "小慕课",
  13. age: 5
  14. },
  15. {
  16. name: "大慕课",
  17. age: 25 ,
  18. },
  19. {
  20. name: "老慕课",
  21. age: 55,
  22. }
  23. ]
  24. }
  25. </script>

会在页面上面打印下面的信息:

  1. 我的名字是:小慕课,我5岁啦~
  2. 我的名字是:大慕课,我25岁啦~
  3. 我的名字是:老慕课,我55岁啦~

6. 表单控件绑定

6.1 <input> 表单元素
使用 v-model 实现这些标签数据的双向绑定。
实例:

  1. <template>
  2. <view>
  3. 输入名称: <input @input="replaceInput" v-model="changeValue">
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. changeValue:"我是慕课"
  11. }
  12. }
  13. }
  14. </script>

6.2<picker> 普通选择器
也就是 H5 的 select 标签,用 :value 绑定 data 变量,当选项发生变化时,绑定的 data 变量 index 也会发生变化。
实例:

  1. <template>
  2. <view>
  3. <picker @change="chooseName" :value="index" :range="names">
  4. <view>
  5. 我的名字是:{{names[index]}}
  6. </view>
  7. </picker>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. index: 0,
  15. names: ['小慕课', '大慕课', '老慕课']
  16. }
  17. },
  18. methods: {
  19. chooseName (e) {
  20. console.log("当前选择名字的索引是:",e.detail.value)
  21. }
  22. }
  23. }
  24. </script>

属性说明:

属性名 类型 说明
range Array 数组中包含了所有选项的内容
value Integer 表示当前选择的是range对应项中的第几个(下标从 0 开始)
@change EventHandle value 改变时触发 change 事件
@columnchange EventHandle 某一列的值改变时触发 columnchange 事件
@cancel EventHandle 取消选择时触发
disabled Boolean 是否禁用

6.3 <radio-group> 单项选择器
@change 属性,在 <radio-group>中的选中项发生变化时触发,内部由多个 <radio> 单选项目组成。
实例:

  1. <template>
  2. <view>
  3. <radio-group class="radio-group" @change="radioChange">
  4. <label class="radio" v-for="(item, index) in items" :key="item.name">
  5. <radio :value="item.name" :checked="item.checked"/> {{item.value}}
  6. </label>
  7. </radio-group>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. items: [
  15. {name: '0', value: '小慕课'},
  16. {name: '1', value: '大慕课', checked: 'true'},
  17. {name: '2', value: '老慕课'}
  18. ]
  19. }
  20. },
  21. methods: {
  22. radioChange (e) {
  23. console.log('radio发生change事件,携带value值为:', e.target.value)
  24. }
  25. }
  26. }
  27. </script>

radio属性说明:
包裹在 radio-group 下面的单选项目。

属性名 类型 说明
value String 的唯一标识。被选中时, 的 change 事件会携带 的 value
checked Boolean 当前是否选中
disabled Boolean 是否禁用
color radio的颜色

7. 小结

数据绑定是一个比较重要的知识点,在开发过程中经常会用到,希望大家能好好研究这一小节,最好自己敲写一下代码,让自己更加了解并掌握数据绑定的各种类型以及应用情况。

本节课程我们主要学习了 uni-app 中几种类型的数据绑定。本节课程的重点如下:

了解并掌握插值表达式、v-bind 动态绑定属性、v-on 进行事件绑定属性、v-for 循环绑定属性以及表单控件绑定的语法。
了解各类数据绑定,以后在各类场景中可以熟练应用。


该分类下的相关小册推荐: