v-model的基本使用例子_v-model 的列子-优快云博客

本文链接：https://blog.youkuaiyun.com/Mr_aswl/article/details/119007950

v-model的使用:

<body>
   <div id="app">
      <label for="male">
          <input type="radio" id="male" value="男" v-model="sex">男
      </label>
      <label for="male">
        <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>你选择的性别是: {{sex}}</h2>
   </div>
<script>
   const app = new Vue({
   el: '#app',
   data: {
      message: '你好啊',
      sex: '男'
   },
})
</script>
</body>

radio单选项

在这里插入图片描述

<body>
   <div id="app">
      <label for="male">
          <input type="radio" id="male" value="男" v-model="sex">男
      </label>
      <label for="male">
        <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>你选择的性别是: {{sex}}</h2>
   </div>
<script>
   const app = new Vue({
   el: '#app',
   data: {
      message: '你好啊',
      sex: '男'
   },
})
</script>
</body>

select下拉及下拉多选

在这里插入图片描述

<body>
   <div id="app">
      <select name="abc" id="" v-model="fruit">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
      </select>
      <h2>你选择的是: {{fruit}}</h2>

      <select name="abc" id="" v-model="fruits" multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <h2>你选择的是: {{fruits}}</h2>
   </div>
<script>
   const app = new Vue({
   el: '#app',
   data: {
    fruit: '1',
    fruits: '2',
   },
})
</script>
</body>

checkbox 多选选项实现

在这里插入图片描述

<body>
   <div id="app">
      <!-- <label for="agree">
          <input type="checkbox" id="agree" v-model="isAgree">同意协议
      </label>
      <h2>你选择的是: {{isAgree}}</h2>
      <button :disabled="!isAgree">下一步</button> -->

      <label for="">
          <input type="checkbox" value="篮球0" v-model="hobbies">篮球0
          <input type="checkbox" value="篮球1" v-model="hobbies">篮球1
          <input type="checkbox" value="篮球2" v-model="hobbies">篮球2
          <input type="checkbox" value="篮球3" v-model="hobbies">篮球3
          <input type="checkbox" value="篮球4" v-model="hobbies">篮球4
      </label>
    <h2>你的爱好是: {{hobbies}}</h2>

    <label v-for="item in orginHobbies" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>

   </div>
<script>
   const app = new Vue({
   el: '#app',
   data: {
    isAgree: false,//单选
    hobbies: [],//多选
    hobbies: [],
    orginHobbies: [1,2,3,4,5,6,7]
   },
})
</script>
</body>