夜光带你走进Vue.js（二十二）擅长的领域-CSDN博客

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102457548

夜光序言：

这倒下去的，若都立了碑，这碑也就失去了价值。

正文：

select 列表

下拉列表的双向数据绑定：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>

<div id="app">
    <select v-model="selected" name="fruit">
        <option value="">选择一个网站</option>
        <option value="www.csdn.com">Csdn</option>
        <option value="www.google.com">Google</option>
    </select>

    <div id="output">
        靓仔靓女~选择的网站是: {{selected}}
    </div>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            selected: ''
        }
    })
</script>
</body>
</html>

很帅~~修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

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

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

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

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

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