【Uni-App社区小程序】012-数据渲染

分手后的思念是犯贱 2023-10-05 13:16 9阅读 0赞

# 一、数据渲染 #

（其中包含了数据渲染和方法调用，这是vue的基础，非常简单！）

（我本不想把笔记写得这么短，奈何这个模块内容确实很少！）

## 1、代码演示 ##

<template>
    	<view>
    		<view class="box">
    			<view>{
       {itemdata}}</view>
    			<view>{
       {user.username}}</view>
    		</view>
    		<button type="default" @click="change()">修改哈哈哈为嘻嘻嘻</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				itemdata : "哈哈哈",
    				user : {
    					username : "訾博",
    				},
    			}
    		},
    		methods: {
    			change:function(){
    				this.itemdata = "嘻嘻嘻";
    			},
    		},
    	}
    </script>
    
    <style>
    	.box{
    		border: 1upx solid #333333;
    		height: 500upx;
    		width: 100%;
    		display: flex;
    	}
    	/* .box>view意思为.box下的直接子元素，不包括box下的view下的view，.box view包括所有 */
    	.box>view{
    		background: #007AFF;
    		border: 1upx solid #FFFFFF;
    		color: #FFFFFF;
    		font-weight: bold;
    		font-size: 40upx;
    		flex: 1;
    		height: 500upx;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    	}
    </style>

## 2、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201107081945131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70