如何在vue框架里展现以下图片里的内容

在一个input内以文字形式展现当地的日期时间天气，并且只以竖线隔开

效果图发一下伪代码

<input :value="weather" placholder="weather">
data(){
 return{
   weather:""
 }
},
mounted(){
  let date="2021-05-19";
   let tianqi="暴雨";
  this.weather=`${date}|${tianqi}`; //或者字符串拼接 date+"|"+tianqi
},
methods:{
  
}

这绑定个data不就能实现嘛

你的图片呢？效果图发上来看下，光描述的话肯定有偏差

 双向数据绑定v-model,然后在vue实例中定义data

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

图标用el的图标库，文字数据从data绑定，分割线在el中有现成的垂直分割线，这种边框样式自己调，多看看文档，都有的