vue+elementui中input框 动态更改placeholder

当时项目需求是 做一个下拉选择框 当我选择下拉框的任意一个值的时候,下面的input的placeholder会提示。
在这里插入图片描述
注意点:要在data中定义holder
然后用到wacth方法,监听select的变化。

<el-form-item label="类型">
	<el-select v-model="newtypeValue" placeholder="请选择" clearable >
		<el-option
			v-for="item in typeNewOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value">
		</el-option>
	</el-select>
</el-form-item>
<!-- 动态更改placeholder中 holder -->
<el-form-item label="内容">
    <el-input v-model="typeContent" :placeholder="holder"></el-input>
</el-form-item>

watch: {
	newtypeValue: function () {
		if(this.newtypeValue === '0') {
			this.holder = '无事件'
		}else if(this.newtypeValue === '1') {
		    this.holder = '请输入Url 例如:http://baidu.com'
		}else if(this.newtypeValue === '2'){
		    this.holder = '请输入单曲id:2'
		}
	}
},

大家请参考这篇文章 https://blog.csdn.net/cofecode/article/details/78541970

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,首先你需要安装 VueElementUI 和 websocket 库,可以使用 npm 进行安装。 ``` npm install vue npm install element-ui npm install websocket ``` 接着创建一个 Vue 组件,用于显示消息列表和发送消息。 ``` <template> <div> <el-input v-model="message" placeholder="请输入消息"></el-input> <el-button type="primary" @click="sendMessage">发送</el-button> <el-table :data="messages"> <el-table-column label="时间" prop="time"></el-table-column> <el-table-column label="内容" prop="content"></el-table-column> </el-table> </div> </template> <script> import WebSocket from 'websocket' export default { data() { return { message: '', messages: [] } }, methods: { sendMessage() { // 创建 websocket 连接 const ws = new WebSocket('ws://localhost:8080') // 监听连接成功事件 ws.onopen = () => { // 发送消息 ws.send(this.message) // 关闭连接 ws.close() } } } } </script> ``` 在这个组件,我们使用 ElementUIInput 和 Button 组件实现输入消息和发送消息的功能,使用 Table 组件显示消息列表。在发送消息时,创建一个 websocket 连接,发送消息后关闭连接。 接下来,你需要编写一个 websocket 服务端,用于接收和处理客户端的消息。 ``` const WebSocket = require('websocket').server const http = require('http') const server = http.createServer((request, response) => { console.log('Received request for ' + request.url) response.writeHead(404) response.end() }) server.listen(8080, () => { console.log('Server is listening on port 8080') }) const wsServer = new WebSocket({ httpServer: server, autoAcceptConnections: false }) function originIsAllowed(origin) { // put logic here to detect whether the specified origin is allowed. return true } wsServer.on('request', (request) => { if (!originIsAllowed(request.origin)) { // Make sure we only accept requests from an allowed origin request.reject() console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.') return } const connection = request.accept('echo-protocol', request.origin) console.log((new Date()) + ' Connection accepted.') connection.on('message', (message) => { if (message.type === 'utf8') { console.log('Received Message: ' + message.utf8Data) // 处理客户端发送的消息 } else if (message.type === 'binary') { console.log('Received Binary Message of ' + message.binaryData.length + ' bytes') connection.sendBytes(message.binaryData) } }) connection.on('close', (reasonCode, description) => { console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.') }) }) ``` 在服务端代码,我们使用了 Node.js 提供的 WebSocket 模块创建一个 WebSocket 服务,监听客户端的连接请求。当客户端连接成功后,服务端会接收客户端发送的消息并进行处理。 以上是一个简单的消息管理功能的实现方法,你可以根据实际需求进行修改和优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值