基于vue v-for 循环复选框-默认勾选第一个的实现方法

 更新时间:2018年03月03日 11:32:33   作者:wax9092  
下面小编就为大家分享一篇基于vue v-for 循环复选框-默认勾选第一个的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

应用场景:在进行多选的时候一般默认显示第一个。

实现方法:纯vue实现

例子:

<span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>

//:checked="index == 0"为索引为0的,即为第一个复选框添加属性。

拓展:默认被选中的复选框,只需要index指定即可。

以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue ElementUI实现异步加载树

    vue ElementUI实现异步加载树

    这篇文章主要为大家详细介绍了vue ElementUI实现异步加载树,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue elementUI 自定义表单模板组件功能实现

    Vue elementUI 自定义表单模板组件功能实现

    在项目开发中,我们会遇到这种需求,在管理后台添加自定义表单,在指定的页面使用定义好的表单,这篇文章主要介绍了Vue elementUI 自定义表单模板组件,需要的朋友可以参考下
    2022-12-12
  • element-ui中el-form-item内的el-select该如何自适应宽度

    element-ui中el-form-item内的el-select该如何自适应宽度

    自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,下面这篇文章主要给大家介绍了关于element-ui中el-form-item内的el-select该如何自适应宽度的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue+Element表格超链接跳转方式

    vue+Element表格超链接跳转方式

    在Vue项目中使用Element UI的表格组件时,可以通过具体的单元格渲染方法添加超链接,在表格的某列中,利用模板或渲染函数插入<a>标签,设置其href属性指向目标URL,实现点击跳转功能,此方法适用于需要从表格信息中快速导航到相关详细页面的场景
    2024-09-09
  • vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载

    vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载

    这篇文章主要介绍了vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决Echarts 显示隐藏后宽度高度变小的问题

    解决Echarts 显示隐藏后宽度高度变小的问题

    这篇文章主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)

    压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)

    大家都知道,Vuejs的 CLI工具 是基于 webpack 来实现的,所以在项目打包后,会生成的文件会很大。 主要原因是 webpack 将我们所有文件都打包成一个js文件,即使再小的项目,打包之后文件都会变得很大。 下面讲讲最近我遇到的相同问题。
    2020-02-02
  • 如何在在Vue3中使用markdown 编辑器组件

    如何在在Vue3中使用markdown 编辑器组件

    vue3发布正式版不久,生态还没完全发展起来,目前支持vue3的开源markdown编辑器组件基本上也寥寥无几,向大家推荐一个很好用的v-md-editor 组件,组件功能很强大,文档也比较详细。该文章只介绍组件的常用功能,更多高级的功能可以参考官方文档。
    2021-05-05
  • Vue绘制双Y轴折线柱状图

    Vue绘制双Y轴折线柱状图

    这篇文章主要介绍了Vue绘制双Y轴折线柱状图实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue 文件目录结构详解

    vue 文件目录结构详解

    本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论