提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue.js：使用v-model创建一组复选框

VueJS 创建 model 复选框 一组 使用
2023-09-27 14:22:47 时间

使用v-model创建一组复选框

此案例主要是通过使用v-model将input元素与Vue实例的数据属性绑定，实现获取选择多个复选框的效果，在浏览器页面显示的时候，根据勾选不同数量的复选框，在下方以无序列表的形式进行显示，效果图见下图所示。

相关代码的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-model创建一组复选框</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
    <div id="app" style="margin: 10px;">
      <p>
        请选择你需要购买的图书：
      </p>
      <p>
        <label for="">
          <input type="checkbox" name="" id="" v-bind:value = "myBook[0]" v-model = "myName">
          {{myBook[0]}}
        </label>
      </p>
      <p>
        <label for="">
          <input type="checkbox" name="" id="" v-bind:value = "myBook[1]" v-model = "myName">
          {{myBook[1]}}
        </label>
      </p>
      <p>
        <label for="">
          <input type="checkbox" name="" id="" v-bind:value = "myBook[2]" v-model = "myName">
          {{myBook[2]}}
        </label>
      </p>
      <p>你所选择的结果如下：</p>
      <ol>
        <li v-for = "myNames in myName">{{myNames}}</li>
      </ol>
    </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myName:[],
        myBook:['前端开发技术实战','jQuery技术实战','c++项目实战开发']
      }
    })
  </script>
</body>
</html>

浏览器的运行效果图

在这里插入图片描述
在这里插入图片描述

相关代码的解释

v-model = "myName"

上面的这个命令，主要表示input元素与Vue实例的数据属性myNames数组进行双向绑定，如果myName数组中原本就已经带有初始化参数，则复选框的选择结果将以继续追加的形式添加到数组中，不过在此案例中默认的是myName数组中初始化为空。

========================

该案例主要是通过使用v-model进行input元素与多选框进行双向绑定~

相关文章