ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue编写时的一些注意事项(3)

2020-02-22 10:02:24  阅读:277  来源: 互联网

标签:Selected vue 初始值 selected 空格 注意事项 编写 输入 string


表单输入绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

多选框

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<!--原始写法的多选组-->

单选框

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<!--原始写法的单选组-->

单选下拉

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<!--原始单选下拉-->

多选下拉

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<!-- 多选下拉的原始写法-->

修饰符

.lazy 输入框的数值在change的时候才与数据同步

	<input v-model.lazy="message" />

.number 将用户输入的值转为数值类型

	<input v-model.number="enterCode"/>
	<!--如果这个值无法被 parseFloat() 解析,则会返回原始的值。-->

.trim 去除用户输入的字符的首尾空格

	<input v-model.trim="string"/>

如果需要去除所有的空格,要用到正则对输入的字符串进行处理
可使用 str.replace(/\s+/g, “”);,加在input的事件上,阻止用户输入空格:

	<input v-model.trim="string" @input="setString" />
	
	<!--函数部分-->
	setString(){
		this.string = String(this.string).replace(/\s+/g, "")
	}

再了个见

weixin_43910427 发布了4 篇原创文章 · 获赞 0 · 访问量 32 私信 关注

标签:Selected,vue,初始值,selected,空格,注意事项,编写,输入,string
来源: https://blog.csdn.net/weixin_43910427/article/details/104414476

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有