Vue2 多选框生成结构代码示例 - 纯源码 - 常规

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Vue2 Checkbox Example</title>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <h1>Vue2 Checkbox Example</h1>
      <form>
        <label v-for='(item, index) in items' :key='index'>
          <input type='checkbox' v-model='checkedItems' :value='item'>{{ item }}</label>
      </form>
      <p>Checked Items: {{ checkedItems }}</p>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
          checkedItems: []
        }
      })
    </script>
  </body>
</html>