vue模板语法三

1、v-model

指定单选默认值

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在IOS中，这会使用户无法选择第一个选项。因为这样的情况下，IOS 不会触发 change 事件。因此，推荐像上面这样提供一个值为空的禁用选项。

下拉框中的用法

多选的用法

复选框用法

v-model的修饰符

.lazy：在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 (除了输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在change事件之后进行同步，代码如下：

<div id="app" v-cloak>
      <input type="text" v-model.lazy="message">结果：{{message}}
</div>
data(){
           return {
                  message:""
            }
}
.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符，代码如下：
<input type="number" v-model.number="age">年龄：{{age}}
data(){
           return {
                age:""
           }
}
这通常很有用，因为即使在 type="number" 时，输入input元素的值也总会返回字符串类型。大家应该都知道字符串类型是无法和加号直接做运算的，会把加号当做连接符使用，通常需要把字符串类型的数字用parseInt或parseFloat转换成数字类型。而.number修饰符会自动转成数字类型。

.trim：如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符，代码如下：
姓名：<input type="text" v-model.trim="name">
 <button type="button" @click="submit()">提交</button>
<script>
      new Vue({
          el:"#app",
          data(){
              return {
                    name:""
              }
          },
methods:{
            submit(){
                if(this.name==''){
                      alert("请输入姓名");
                      return false;
                }
               }
          }
   })
</script>