checkbox控件的checked属性作用是_vue-表单控件-v-model

这一篇内容全部都用来讲关于v-model。后期进行对其部分进行更新。

v-model定义

· 作用：在表单元素上创建双向数据绑定

· 说明：监听用户的输入事件以更新数据

ps:这里需要注意的是，如果在data里面有声明值的话，那么会覆盖原本设置的初始值。比如：value、checked、selected等

· 案例：计算器

Html代码

<div id="app">
   <input type="text" v-model="message" placeholder="input初始值">
   <p>Message is: {{ message }}</p>
 </div>

Javascript代码

<script>
   var app = new Vue({
    el: "#app",
    data: {
     message:""
    }
    
   })
</script>

这里我们没有在message里设置值。所以在html里面的input框中的placeholder默认值还是有效的。

但是我们如果把javascript值改成以下呢

<script>
   var app = new Vue({
    el: "#app",
    data: {
     message:"这是在data里所设置的值"
    }    
   })
  </script>

这时候我们运行后发现input框中的placeholder中的值为“这是在data里所设置的值”。这里需要注意的是，即使是空字符串，也会覆盖原来的值。比如message:” ”。目前我发现不能覆盖原来的值方法有message:“”和message:null这两种方法。

接下来有单选框，下拉选择等。用法都和这个一样，差不多。

表单修饰符

一、.lazy

定义：这个主要用来阻止input的输入框值与数据同步，是使用change事情同步。具体可以运行以下代码。

Html 代码

<div id="app">
   <input type=”text” v-model.lazy="value">
   <div>{{value}}</div>
</div>

Javascript 代码

<script>
   var app = new Vue({
    el: "#app",
    data: {
     value: '55'
    }
   })
 </script>

上段代码可以把v-model.lazy的.lazy去掉，就可以看出来区别在哪里了。简单的形容一下，就是我们在改input里面的值时，下面的div中的值并不会实时更新，而是要离开input并点击一下，div中的值才会和input框中所输入的值一样。

二.number

定义：这个主要用来把input中所输入的值转换number

Html代码

<div id="app">
   <input v-model.number="value" type="number">
   <div>{{value}}</div>
 </div>

Javascript 代码

<script>
   var app = new Vue({
    el: "#app",
    data: {
     value: ''
    }
   })
</script>

在html代码中，type="number"这个是什么意思呢？我们可以尝试把这段去掉，我们发现如果上面数字遇到特殊符号的时候，会停止更新，但是之前的值还依然存在。现在我们把type="number"这个加上。我们发现了只要input框中所输入的值含有特殊符号的时候，下面的div值会清空。

三 .trim

这个修饰符主要用来去除首尾空格符。（这是官方解释）在我理解看来，应该去除input框内任意位置空格符。毕竟在我理解看来，首尾，应该就是仅仅指开头和结尾。废话不多说，上代码。

Html代码

<div id="app">
   <input v-model.trim="value" type="number">
   <div>{{value}}</div>
</div>

Javascript 代码

<script>
   var app = new Vue({
    el: "#app",
    data: {
     value: ''
    } 
   })
</script>

这个用法和.number和.lazy一样。现在我们再来想想这两个主要有什么作用呢？一个是只用来仅输入数字作用，另外一个来控制是否是实时更新。

当v-model修饰符为.trim的时候，我们发现在input框内任意位置输入空格时候，数据并不会显示出来。

以上就是简单的关于vue表单控件绑定使用方法介绍。

关于vue表单控件使用

一、Textarea

Html

<div id="app">
   <textarea v-model="message" :placeholder="initial">  
   </textarea>
   <div>textarea内容为{{message}}</div>
 </div>

Javascript

<script>
   var app = new Vue({
    el: "#app",
    data: {
     initial:"请在textarea内输入内容",
     message: ''
    }
   })
 </script>

这里我们看到placeholder前面有个“：”的符号，我们来回顾一个这个是干嘛用的？为什么要用它？

具体参考往期文章：

soviya：VUE操作classstyle绑定属性绑定事件事件修饰符​zhuanlan.zhihu.com

如果不明白，或者有新的发现，可以私信我或者留言。

二、Checkbox

Html

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

Javascript

<script>
   var app = new Vue({
    el: "#app",
    data: {
     checked:true
    } 
   })
 </script>

多个内容

Html

<div id="app">
   <input type="checkbox" :value=grape id="grape" v-model="checkedes" />
   <label for="grape">葡萄</label>
   <input type="checkbox" :value=peach id="peach" v-model="checkedes" />
   <label for="peach">桃子</label>
   <input type="checkbox" :value=durian id="durian" v-model="checkedes" />
   <label for="durian">榴莲</label>
   <div>
    您已所选的内容有{{ checkedes }}
   </div>
  </div>

javscript

<script>
   var app = new Vue({
    el: "#app",
    data: {
     grape:"葡萄",
     peach:"桃子",
     durian:"榴莲",
     checkedes:[]
    } 
   })
 </script>

当input中的type类型为checkbox时。checkbox中的value值不会直接显示给用户，主要用于表单数据的提交和处理。radio也一样。

下列是radio 单项选择

Html

<div id="app">
   <input type="radio" :value=grape id="grape" v-model="checkedes" />
   <label for="grape">葡萄</label>
   <input type="radio" :value=peach id="peach" v-model="checkedes" />
   <label for="peach">桃子</label>
   <input type="radio" :value=durian id="durian" v-model="checkedes" />
   <label for="durian">榴莲</label>
   <div>
    您已所选的内容有{{ checkedes }}
   </div>
</div>

Javascript

<script>
   var app = new Vue({
    el: "#app",
    data: {
     grape:"葡萄",
     peach:"桃子",
     durian:"榴莲",
     checkedes:[]
    } 
   })
</script>

Select 下拉选择框

<div id="app">
   <select v-model="selected">
    <option value="">请选择</option>
    <option>葡萄</option>
    <option>桃子</option>
    <option>榴莲</option>
   </select>
  <div>
    您已所选的内容有{{ selected }}
  </div>
</div>

Javascript

<script>
   var app = new Vue({
    el: "#app",
    data: {
     selected:""
    }
   })
</script>

我们如何进行对其中某一数据初始化进行选定呢？这里先留个坑，等后面讲过生命周期和v-for等再来解决这个问题。

下一篇预告：组件