vue复选功能实现

最新推荐文章于 2024-08-14 10:04:35 发布

weixin_51127957

最新推荐文章于 2024-08-14 10:04:35 发布

阅读量149

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51127957/article/details/113310342

版权

本文通过一个Vue复选功能的示例，介绍了如何使用Vue文件代码实现这一功能，并结合splice函数的详细说明，包括其在数组中添加、删除和替换元素的用法，强调了该方法会直接修改原始数组。此外，文章还提到了v-for指令在绑定:class中的应用，以加深对Vue框架的理解。

摘要由CSDN通过智能技术生成

演示图：

Vue文件代码：

  <div>
    <div class="Select">
      <p class="Title">Single choice</p>
      <span
        class="Box"
        :class="{Selected_active:index == One}"//条件为真时,：class多了个选中样式属性，即为选中状态.
        v-for="(item,index) in List"
        :key="index"
        @click="SelectedOne(index)"
      >{
  {item.message}}</span>
    </div>
    <div class="Select">
      <p class="Title">Multiple choice</p>
      <span
        class="Box"
        :class="{Selected_active:index == Selected[index]}"
        v-for="(item,index) in List"
        :key="ind