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: //img.cn/cdn/content-toolbar/-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中的数据绑定与事件绑定，若有什么地方不明确或某些位置不太懂得请在评论中指出，后期我会继续出更多的基础教学谢谢各位支持 ，谢谢大家