vue实现一个页面几个数据,点击按钮只显示特定的数据

效果图是这样,点击信息1,出现数字1,点击信息2,出现2,依次下去,都可以显示出来。如果一个页面有多个需要显示隐藏的数据,那么这个方法可以很好的实现出来。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上代码,框架我使用的是elementui,点击触发事件,获取value值

<el-select v-model="region" @change="dd" placeholder="请选择活动区域">
      <el-option  v-for="(it,inn) in its" :key="inn" :label="it.label" :value
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我可以给你提供一个基本的 Vue.js 聊天室示例,其中包含会话列表和聊天记录。 首先,我们需要安装 Vue.js。你可以使用 npm 或 yarn 安装 Vue.js: ``` npm install vue ``` 或者 ``` yarn add vue ``` 接下来,我们将创建一个名为 ChatApp 的 Vue.js 组件,并在其中添加会话列表和聊天记录。 ```html <template> <div> <div class="sessions"> <div v-for="(session, index) in sessions" :key="index" class="session" :class="{ active: index === activeSession }" @click="setActiveSession(index)" > {{ session.name }} </div> </div> <div class="chat"> <div v-if="activeSession !== null"> <div v-for="(message, index) in sessions[activeSession].messages" :key="index"> <div v-if="message.sender === 'me'" class="message message-me"> {{ message.text }} </div> <div v-else class="message message-other"> {{ message.text }} </div> </div> <form @submit.prevent="sendMessage"> <input v-model="newMessage" type="text" placeholder="Type a message..." /> <button type="submit">Send</button> </form> </div> <div v-else> Select a session to start chatting </div> </div> </div> </template> <script> export default { data() { return { sessions: [ { name: 'Session 1', messages: [ { sender: 'other', text: 'Hello!' }, { sender: 'me', text: 'Hi there!' }, ], }, { name: 'Session 2', messages: [ { sender: 'other', text: 'How are you?' }, { sender: 'me', text: 'I am doing great, thanks!' }, ], }, ], activeSession: null, newMessage: '', }; }, methods: { setActiveSession(index) { this.activeSession = index; }, sendMessage() { if (this.activeSession !== null && this.newMessage !== '') { this.sessions[this.activeSession].messages.push({ sender: 'me', text: this.newMessage, }); this.newMessage = ''; } }, }, }; </script> <style> .sessions { display: flex; flex-direction: column; width: 200px; height: 100%; border-right: 1px solid #ccc; } .session { padding: 10px; cursor: pointer; } .session.active { background-color: #eee; } .chat { display: flex; flex-direction: column; padding: 10px; width: calc(100% - 200px); height: 100%; } .message { padding: 10px; margin-bottom: 10px; border-radius: 5px; max-width: 80%; } .message-me { background-color: #eee; align-self: flex-end; } .message-other { background-color: #fff; align-self: flex-start; } form { display: flex; margin-top: 10px; } input { flex-grow: 1; padding ### 回答2: 当使用Vue来编写一个具有会话列表的聊天室时,我们需要考虑以下几个方面: 1. 数据模型:我们可以使用Vue的响应式数据来存储聊天室的信息。例如,可以创建一个sessions数组来存储所有会话的详细信息,每个会话对象包含会话ID、参与者信息、最后一条消息等。 2. 组件结构:我们可以将聊天室组件分解成更小的组件。一个会话列表组件可以用来显示所有会话,每个会话可以单独为一个组件,用于呈现会话的详细信息和聊天内容。 3. 事件处理:我们可以使用Vue的事件处理机制来处理用户的交互操作,例如点击会话列表中的一个会话,可以触发一个事件来显示该会话的聊天内容。 4. 样式设计:可以使用Vue的样式绑定功能,根据会话的状态(如未读消息数量)来动态应用不同的样式。 具体的实现步骤如下: 1. 创建Vue实例,并初始化一个sessions数组用于存储会话的详细信息。 2. 定义会话列表组件,使用v-for指令遍历sessions数组,将每个会话显示一个列表项。 3. 在会话列表组件内部,使用v-on指令绑定一个点击事件,当用户点击会话时,触发一个方法。 4. 在方法中,通过会话ID获取该会话的详细信息,并将其显示在另一个组件中(聊天内容组件)。 5. 创建聊天内容组件,使用Vue的computed属性计算属性来动态获取当前会话的聊天内容。 6. 在聊天内容组件中,使用v-for指令遍历聊天内容数组,显示每条聊天消息。 7. 在聊天内容组件中,使用v-model指令绑定一个输入框,允许用户输入新的消息。 8. 为发送按钮添加点击事件处理程序,该处理程序将新消息添加到聊天内容数组中,并更新会话的最后一条消息。 9. 使用Vue的样式绑定功能,根据会话的状态(如未读消息数量)应用不同的样式。 通过以上步骤,我们可以实现一个基于Vue的具有会话列表的聊天室。用户可以在会话列表中选择特定会话,然后在聊天内容中进行实时聊天。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值