在uniapp里 v-bind和v-for的使用和在vue使用模式一样
v-bind 定义一张图片 把图片渲染到页面上
<template>
<view>
<!-- v-bind:src v-bind可省略 -->
<image :src="img"></image>
</view>
</template>
<script>
export default {
data() {
return {
img:"https://gimg2.baidu.com" //在此输入图片地址
}
}
}
</script>
v-for 在date中定义一个数组 将数组渲染到页面上
//index 索引 从0开始的
<template>
<view>
<view v-for="(item,index) in arr" :key="item.id">
序号:{{index}},名字:{{item.name}},年龄:{{item.age}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr:[
{
name:"张三",
age:"20",
id:"1"
},
{
name:"李四",
age:"18",
id:"2"
},
{
name:"王二",
age:"29",
id:"3"
},
]
}
}
}
</script>