uni-app数据绑定的例子_uniapp 绑定id-CSDN博客

本文链接：https://blog.csdn.net/monica1_1/article/details/104022557

本文详细介绍了Vue.js中数据绑定的使用方法，包括文本插值、属性绑定、循环遍历列表、事件监听等核心功能。通过实例展示了如何利用{{ }

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view>
		<view>数据绑定的学习</view>
		<view>{{msg}}</view>
		<view>{{1+msg}}</view>
		<view>{{1+1}}</view>
		<view>{{flag?'这是真的':'我是假的'}}</view>
		<image src="https://goss.veer.com/creative/vcg/veer/800water/veer-170484153.jpg"></image>
		<!-- 通过v-bind对src进行数据绑定  -->
		<image v-bind:src="imgUrl"></image>
		
		<!-- item指的是项，index指的是索引，:key唯一键 -->
		<view v-for="(item,index) in arr" :key="item.id">
			序号:{{item.id}},名字:{{item.name}},年龄:{{item.age}}
		</view>
		
		<button type="primary" v-on:click="clickHandle(20)">我是一个按钮</button>
		<!-- v-on可以简写成@ -->
		<button type="primary" @click="clickHandle(20)">我是一个按钮2</button>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				msg:'hello',
				flag:true,
				imgUrl:'https://goss.veer.com/creative/vcg/veer/800water/veer-170484153.jpg',
				arr:[
					{
						name:'宋小宝',
						age:20,
						id:1
					},
					{
						name:'宋小宝',
						age:0,
						id:2
					},
					{
						name:'宋小宝',
						age:24,
						id:3
					},
					{
						name:'宋小宝',
						age:30,
						id:4
					}
				]
			}
		}
	,methods:{
		clickHandle(num){
			console.log('点击我了',num)
		}
	}
}
</script>

<style>
</style>