04-学习笔记（vue使用v-for循环遍历出多个复选框）【新手】

最新推荐文章于 2024-10-20 20:56:38 发布

TRY_121

最新推荐文章于 2024-10-20 20:56:38 发布

阅读量2k

点赞数 1

分类专栏： HTML vue.js 文章标签： vue.js 学习 javascript

本文链接：https://blog.youkuaiyun.com/fwz123/article/details/128276643

版权

vue.js 同时被 2 个专栏收录

4 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

内容简介：

使用v-for循环遍历生成多个复选框（vue基础、webstorm）。

详细内容：

在HTML文件中，使用v-for指令，将数组中存储的内容，循环遍历生成复选框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
  <lable v-for="item in originFruits" v-bind:for="item"><!--label标签的 for 属性指向<input>元素的 id 属性-->
    <input type="checkbox" v-bind:value="item" :id="item">{{item}}<!--value属性用来定义被选中时发送到服务器的值-->
  </lable>
</div>

<script src='../js/vue.js'></script><!--注意，要引入vue.js文件-->
<script>
  const app = new Vue({
    el: '#app',
    data: {
      originFruits:['篮球','足球','羽毛球','台球','排球','乒乓球'],
    }
  })
</script>
</body>
</html>