Vue.js 学习日志——表单（八）

Vue.js 表单

表单应用，使用 v-model 在表单控件元素上进行双向数据绑定。

官方图：

---

• 输入框

<div id="div">
  <!-- 输入框 -->
  <input v-model="inpudtmsg">
  <p>inpudtmsg:{{ inpudtmsg }}</p>
</div>

<script type="text/javascript">
  new Vue({
    el:"#div",
    data:{
      inpudtmsg:""
    }
  });
</script>

---

• 单个复选框

<div id="div">
  <!-- 单个复选框 -->
  <input type="checkbox" id="checkbox" v-model="checkboxflag">
  <p>checkboxflag:{{ checkboxflag }}</p>
</div>

<script type="text/javascript">
  new Vue({
    el:"#div",
    data:{
      checkboxflag:false
    }
  });
</script>

---

• 多个复选框

<div id="div">
  <!-- 多个复选框 -->
  <input type="checkbox" id="chinese" value="语文" v-model="checkboxmsg">语文
  <input type="checkbox" id=mathmatics value="数学" v-model="checkboxmsg">数学
  <input type="checkbox" id="english" value="英语" v-model="checkboxmsg">英语
  <p>checkboxmsg:{{ checkboxmsg }}</p>
</div>

<script type="text/javascript">
  new Vue({
    el:"#div",
    data:{
      checkboxmsg:[]
    }
  });
</script>

---

单选按钮

<div id="div">
  <!-- 单选按钮 -->
  <input type="radio" id="taobao" value="淘宝" v-model="shop">淘宝
  <input type="radio" id="jd" value="京东" v-model="shop">京东
  <p>shop:{{ shop }}</p>
</div>

<script type="text/javascript">
  new Vue({
    el:"#div",
    data:{
      shop:"淘宝"
    }
  });
</script>