【vue】disabled及trim应用

阅读 73

2022-03-11

实现内容:期望用户发表有效评论,利用vant组件以及javascript的trim实现空格自动检测。

v-model.trim :  设置去除字符串的头尾空白符

 disabled:将输入框设置为禁用状态(动态添加)

<div>
    <van-field
      v-model.trim="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-button
      :disabled="!message.length"
    >发布</van-button>
  </div>

使用前:空格内容也可以发送 

使用后:仅输入空格无法发布,禁用button 

精彩评论(0)

0 0 举报