使用vue+elementui制作一个可以显示专属id的
时间: 2024-01-14 15:04:55 浏览: 21
好的,可以使用以下代码实现:
1. 首先在Vue组件中定义一个data属性来存储专属id:
```
<template>
<div>
<el-input v-model="id" placeholder="请输入专属id"></el-input>
<el-button type="primary" @click="showId">显示专属id</el-button>
</div>
</template>
<script>
export default {
data() {
return {
id: ''
}
},
methods: {
showId() {
// 在控制台输出专属id
console.log('您的专属id是:' + this.id)
}
}
}
</script>
```
2. 在模板中通过el-input组件获取用户输入的专属id,并在el-button组件的click事件中调用showId方法,在控制台中输出专属id。
3. 如果需要在页面上直接显示专属id,可以在data属性中新增一个showId属性,将其赋值为专属id,并在模板中通过插值表达式显示:
```
<template>
<div>
<el-input v-model="id" placeholder="请输入专属id"></el-input>
<el-button type="primary" @click="showId">显示专属id</el-button>
<div v-if="showId">您的专属id是:{{ showId }}</div>
</div>
</template>
<script>
export default {
data() {
return {
id: '',
showId: ''
}
},
methods: {
showId() {
// 将专属id赋值给showId属性
this.showId = this.id
}
}
}
</script>
```
这样,当用户点击按钮后,页面上就会显示他输入的专属id。