uni-app数据绑定与事件绑定（三）

目录

插值表达式的使用

v-bind动态绑定属性

v-for的使用

uni-app中的事件绑定

---

在页面中需要定义数据，和我们前的vue一摸一样，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

• 插值表达式的使用

• 利用插值表达式渲染基本数据

<view>{{msg}}</view>

• 在插值表达式中使用三元运算

<view>{{ flag ? '真':'假' }}</view>

• 基本运算

<view>{{1+1}}</view>

• v-bind动态绑定属性

• 我们首先在data中定义一张图片

export default {
  data () {
    return {
      img: '//csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1'
    }
  }
}

• 利用v-bind进行渲染

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

• 还可以缩写成:

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

• v-for的使用

• data中定以一个数组，最终将数组渲染到页面上

export default {
  data () {
    return {
          arr: [
              { name: '李小龙', age: 29 },
              { name: '甄子丹', age: 39 },
              { name: '成龙', age: 49 },
        ]
    }
  }
}

• 利用v-for进行循环

<view v-for="(item,index) in arr" :key="index">名字：{{item.name}}---年龄：{{item.age}}</view>

---

• uni-app中的事件绑定

在uni-app中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="btn">我是按钮</button>

• 事件函数定义在methods中

methods: {
  btn() {
    console.log('我被点击了')
  }
}

• 事件传参

默认如果没有传递参数，事件函数第一个形参为事件对象  

// template
<button @click="btn">点我啊</button>
// script
methods: {
  btn(e) {
    console.log(e)
  }
}

如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

// template
<button @click="btn(1)">点我啊</button>
// script
methods: {
  btn(num) {
    console.log(num)
  }
}

如果获取事件对象也想传递参数

// template
<button @click="btn(1,$event)">点我啊</button>
// script
methods: {
  btn(num,e) {
    console.log(num,e)
  }
}

 本篇文章讲解uni-app中的数据绑定与事件绑定，若有什么地方不明确或某些位置不太懂得请在评论中指出，后期我会继续出更多的基础教学谢谢各位支持 ，谢谢大家