vue-008 v-model的简介，联合radio,select,checkbox，以及修饰符的使用

一、使用入门

v-model一般说成双向绑定，基本上来说就是把v-bind和v-on简化在一起使用

先在data里放个标准message

message:'hello world'

按vue最基本的输出方法就是下面这样，只能输出到h2里面，而不能通过改变h2的值，来修改data里的message的值

如果想通过页面来修改message的值，就得这样写，先用v-bind绑定input的value,再用v-on绑定input的输入事件，把输入的内容传给message

    <input type="text" :value="message" @input="message=$event.target.value">
    <h2>{
  {message}}</h2>

这样就实现了双向绑定，效果如下

上面的双向绑定代码，可以简化成一个v-model

    <input type="text" v-model="message">
    <h2>{
  {message}}</h2>

效果跟上面是一样的

 

二、联合radio

一般radio的写法是这样的，大部分时候就是用来选择性别了

    <input type="radio" value="boy" name="sex" >男孩<br>
    <input type="radio" value="girl" name="sex" >女孩<br>

显示效果是这样的