uni-app（7）— 数据绑定以及 v-bind，v-for，v-on
此文为uni-app总结笔记（7）— 数据绑定 以及 v-bind，v-for，v-on
在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
export default {
data () {
return {
msg: 'hello-uni'
}
}
}
插值表达式的使用
-
利用插值表达式渲染基本数据
<view>{ {msg}}view> -
在插值表达式中使用三元运算
<view>{ { flag ? '我是真的':'我是假的' }}view> -
基本运算
<view>{ {1+1}}view>
数据绑定示例代码：
<template>
<view>
<view>数据绑定的学习</view>
<view>{
{
msg}}</view>
<view>{
{
"你好呀"+"世界"}}</view>
<view>{
{
1+1}}</view>
<view>{
{
flag?"这是真的，我是true":"这是假的，我是false"}}</view>
</view>
</template>
<script>
export default {
data() {
return {
msg: 'hello',
flag: true,
}
},
}
</script>
<style>
</style>
示例效果图：
v-bind动态绑定属性
在data中定义了一张图片，我们希望把这张图片渲染到页面上
export default {
data () {
return {
img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
}
}
}
利用v-bind进行渲染
<image v-bind:src="img">image>
还可以缩写成:
<image :src="img">image>
v-for的使用
data中定以一个数组，最终将数组渲染到页面上
data () {
return {
arr: [
{
name: '刘能', age: 29 },
{
name: '赵四', age: 39 },
{
name: '宋小宝', age: 49 },
{
name: '小沈阳', age: 59 }
]
}
}
利用v-for进行循环
<view v-for="(item,i) in arr" :key="i">名字：{
{item.name}}---年龄：{
{item.age}}view>
uni中的事件
事件绑定
在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@
<button @click="tapHandle">点我啊button>
事件函数定义在methods中
methods: {
tapHandle () {
console.log('真的点我了')
}
}
事件传参
-
默认如果没有传递参数，事件函数第一个形参为事件对象
// template // script methods: { tapHandle (e) { console.log(e) } } -
如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据
// template // script methods: { tapHandle (num) { console.log(num) } } -
如果获取事件对象也想传递参数
// template // script methods: { tapHandle (num,e) { console.log(num,e) } }
所有数据绑定以及 v-bind，v-for的示例代码：
<template>
<view>
<view>数据绑定的学习view>
<view>{
{msg}}view>
<view>{
{"你好呀"+"潼潼"}}view>
<view>{
{1+1}}view>
<view>{
{flag?"这是真的，我是true":"这是假的，我是false"}}view>
<image :src="imgUrl">image>
<view v-for="(item,index) in arr" :key="item.id">
序号：{
{index}},
名字：{
{item.name}},
年龄：{
{item.age}}
view>
<button type="primary" v-on:click="clickHandle(20,$event)">按钮button>
view>
template>
<script>
export default {
data() {
return {
msg: 'hello',
flag: true,
imgUrl: "http://photo.weitianxia.cn/uploadhtml5_2021-03-31_6063ebd1cab59.jpg",
arr: [
{
name: "潼潼",
age: 2,
id: 1
},
{
name: "小何",
age: 30,
id: 2
},
{
name: "小可",
age: 29,
id: 3
},
{
name: "小王",
age: 30,
id: 4
},
{
name: "端哥",
age: 20,
id: 5
}
]
}
},
methods: {
clickHandle(num,e) {
console.log("点击我了",num,e)
}
}
}
script>
<style>
style>
所有数据绑定以及 v-bind，v-for，v-on事件绑定和事件传参的示例图：
好了，今天就这样啦~~