Vue学习记录09

cwtlw

于 2024-11-22 16:37:17 发布

阅读量1k

点赞数 25

分类专栏： Vue学习总结文章标签： vue.js 学习前端

本文链接：https://blog.youkuaiyun.com/cwtlw/article/details/143936035

版权

Vue学习总结专栏收录该内容

21 篇文章

订阅专栏

表单输入绑定

在前端处理表单时，常常需要将表单输入框的内容同步给JavaScript中相应的变量。如果手动连接值绑定和更改事件监听器会显得很麻烦：

<input
  :value="text"
  @input="event => text = event.target.value">

v-model指令帮我们简化了这一步骤：

<input v-model="text">

可以看到当我修改了表单的值，text的值也发生了改变。

另外，v-model还可以用于各种不同类型的输入，<textarea>、<select>元素。它会根据所使用的元素自动使用对应的DOM属性和事件组合：

文本类型的<input>和<textarea>元素会绑定value属性并侦听input事件；
<input type="checkbox"> 和 <input type="radio">会绑定check 属性并侦听change事件;
<select>会绑定value 属性并侦听change事件。

（注意：v-model会忽略任何表单元素上初始值的value、checked或selected指令。它将始终将当前绑定的JavaScrpit状态视为数据的正确来源。应该在JavaScript中使用响应式系统的API来声明该初始值。）

基本用法

文本

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

注意在<textarea>中是不支持插值表达式的。请使用v-model来替代：

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框

单一的复选框，绑定布尔值类型值：

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

我们也可以将多个复选框绑定到同一个数组或集合的值：

const checkedNames = ref([])

<div>Checked names: {{ checkedNames }}</div>

<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>

单选按钮

<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

选择器

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

（注意：v-model 表达式的初始值不匹配任何一个选择项，<select>元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。）

多值（值绑定到一个数组）

<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

选择器的选项可以使用v-for动态渲染：

const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

给seleced设置值只影响没有选择时的值，选择后option的value值会传给seleced。

值绑定

对于单选按钮，复选框和选择器选项，v-model绑定的值通常是静态的字符串（或者对复选框是布尔值）

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value 和 false-value时Vue特有的attributes，仅支持v-model配套使用。这里toggle属性的值会在被选中时被设为‘yes',取消选择时设为’no'。也可以通过v-bind将其绑定为其他动态值。

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

(提示：true-value和false-value 不会影响value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。）

单选按钮

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick会在第一个按钮被选中时设为first，在第二个按钮选中被设为second。

选择器选项

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model同样也支持非字符串类型的值绑定！在上面的这个例子中，当某个选项被选中，seletced会被设为该对象字面量值{number:123}。

修饰符

.lazy

默认情况下，v-model会在每次input事件后更新数据。可以添加lazy修饰符改为每次change事件后更新数据：

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number

如果你想让用户输入自动转换为数字，你可以在v-model后添加.number修饰符来管理输入：

<input v-model.number="age" />

如果该值无法被parseInt()处理，那么将返回原始值。

number修饰符会在输入框有type = number 时自动启用。

.trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在v-model后添加.trim修饰符。

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