【index.vue】声明方法 在组件中绑定事件 并触发

目录

第一步·创建uniapp项目

第二步·在index.vue里面声明方法 在组件中绑定事件 并触发

效果：

点击以后变为：

---

第一步·创建uniapp项目

在HBuilder里，新建，项目，uni-app。

第二步·在index.vue里面声明方法 在组件中绑定事件 并触发

 （1）添加按钮button

<view class="content">
        <text>{{title}}</text>
        <button type="primary" @click="changetitle">改变title</button>
 </view>

（2）定义 changetitle

methods: {
            changetitle:function(){
                this.title="world"
            }

<template>
	<view class="content">
		<text>{{title}}</text>
		<button type="primary" @click="changetitle">改变title</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {},
		methods: {
			changetitle:function(){
				this.title="world"
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

效果：

点击以后变为：