vue数据动态添加和动态绑定思路(图文)

本篇文章给大家带来的内容是关于vue数据动态添加和动态绑定思路(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

先上案例

3605442893-5bc58bdcd3e51_articlex.gif

首先来分析一下,勾选科目的时候,下面同时增加科目的满分值设置。

以前写jquery的思路:当勾选的时候创建dom节点,然后把dom节点append到父节点上,项目采用前后分离的方式进行交互,这样一来,所设置的科目满分值就脱离绑定了。更进一步:把所有设置满分值的input先进行绑定,然后控制显示跟隐藏,这样一来目的达到了,但是一旦选项是从后台获取的话,后台一旦改动,这边就要跟着更改。

立即学习“前端免费学习笔记(深入)”;

充分利用数据驱动视图思想:

2828041093-5bc5a39ddd6f5_articlex.png

代码片段

1.说明:此函数作用,判断数组里面是否包含函数传入的值,这边使用遍历方法对数组进行循环,看数组里的对象的subject的值是不是跟传入的相等,如果相等就说明数组里面包含这项了,也就是说明了这个科目已经是勾选的状态了,也就要把他删除掉,这边删除使用splic方法(vue的变异方法),直接改变原数组的值,并处发vue对视图更新。

1357586136-5bc5a4231f3f8_articlex.png

2.说明:定义满分值循环的数组

1273719601-5bc5a59d35e69_articlex.png

3、说明:此数组为上面CheckBox的数据

3976583115-5bc5a66b0d93a_articlex.png

4、说明:v-for循环详细的写法

572701563-5bc5a6c272e41_articlex.png

以上就是vue数据动态添加和动态绑定思路(图文)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1612584.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 03:02:27
下一篇 2025年12月24日 03:02:35

相关推荐

  • css中垂直水平居中的实现方法总结(附代码)

    本篇文章给大家带来的内容是关于css中垂直水平居中的实现方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近看到很多面试题目会问:请说出几种使用css完成垂直水平居中的方法?正好看css基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小结 一、使用a…

    2025年12月24日 好文分享
    000
  • css中grid属性的用法介绍(代码)

    本篇文章给大家带来的内容是关于css中grid属性的用法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 grid布局 加在父元素上的属性 grid-template-columns/grid-template-rows 定义元素的行或列的宽高 立即学习“前端免费学习笔记…

    2025年12月24日 好文分享
    000
  • 如何使用纯CSS实现一把雨伞开合的动画效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现一把雨伞开合的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 do…

    2025年12月24日
    000
  • css怎么给图片添加阴影效果?图片添加阴影的两种方法(代码实例)

    css可以实现很多的图片效果,图片阴影效果就是其中之一,那么css如何给图片添加阴影效果?本篇文章就给大家介绍如何使用css给图片添加阴影(附代码),让大家了解css给图片加阴影的两种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 首先我们来看看css给图片添加阴影效果的第一种…

    2025年12月24日
    000
  • CSS中margin边界叠加问题及解决方案

    本篇文章就给大家介绍css中margin边界叠加问题及解决方案 。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加。 CSS的marg…

    2025年12月24日 好文分享
    000
  • HTML+CSS制作简单下拉菜单的实例代码

    在页面布局时,经常会用到下拉列表,作为web前端开发人员,你知道html下拉菜单怎么做吗?这篇文章就和大家分享html,css下拉菜单的代码,有一定的参考价值,感兴趣的朋友可以参考一下。 在制作HTML下拉菜单时,会用到很多CSS属性,比如:hover,list-style,float浮动,disp…

    2025年12月24日
    000
  • 如何使用纯CSS实现飞机舷窗风格的toggle控件

    本篇文章给大家带来的内容是关于如何使用纯css实现飞机舷窗风格的toggle控件,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • CSS样式类的讲解(附实例)

    本篇文章给大家带来的内容是关于css样式类的讲解(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是…

    2025年12月24日 好文分享
    000
  • CSS样式类的实例代码(导航栏、分页、层级选择器)

    本篇文章给大家带来的内容是关于css样式类的实例代码(导航栏、分页、层级选择器),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 导航栏 拥有易用的导航条对于任何网站都很重要。通过 CSS,您能够把乏味的 HTML 菜单转换为漂亮的导航栏。导航栏需要标准的 HTML 作为基础。在我们…

    2025年12月24日
    000
  • css中浮动的label的介绍(附案例)

    本篇文章给大家带来的内容是关于css中浮动的label的介绍(附案例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在web项目中,有一个很重的模块就是登陆/注册模块,这个模块的主体部分就是一个form表单,这个form表单包含两个重要input组(用户名/密码),每个input…

    好文分享 2025年12月24日
    000
  • CSS中filter属性定义了元素的可视效果的介绍

    本篇文章给大家带来的内容是关于css中filter属性定义了元素的可视效果的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 blur 给图像设置高斯模糊。”radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊。 如果…

    2025年12月24日 好文分享
    000
  • css中Flex布局要素的介绍(附代码)

    本篇文章给大家带来的内容是关于css中flex布局要素的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 flex布局为 “弹性布局”,任何一个元素都可以通过设置css属性 display:flex; webkit内核浏览器为 display: …

    好文分享 2025年12月24日
    000
  • css中display属性的介绍(附实例)

    本篇文章给大家带来的内容是关于css中display属性的介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css定位属性Positioning display: none 不再页面渲染元素 css-test .content { display: none; } 这一…

    2025年12月24日
    000
  • css实现文字溢出省略号的四种方法(附代码)

    本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加省略号的时候,使用的是-webkit-line-clamp、-webkit-box-orient属性…

    2025年12月24日
    000
  • web前端中常用的封装方法介绍(代码示例)

    本篇文章给大家带来的内容是关于web前端中常用的封装方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、放大镜 //页面加载完毕后执行window.onload = function () {var oDemo = document.getElementById…

    2025年12月24日
    000
  • css专业术语有哪些?css专业术语介绍

    本篇文章给大家带来的内容是关于css专业术语有哪些?css专业术语介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1. 属性 如height、color等,称作css的属性。 2. 值 在css中,如:10px, 50%, #ccc等这些都称作css的值。比较常见的类型值有:整…

    好文分享 2025年12月24日
    000
  • CSS堆叠上下文是什么?有什么作用?

    本篇文章给大家带来的内容是关于css堆叠上下文是什么?有什么作用?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS 堆叠上下文是啥? 我们有一个基本样式的div,样式如下: div{ width: 200px; height: 200px; border:10px solid …

    2025年12月24日 好文分享
    000
  • CSS如何实现反方向圆角?(代码)

    本篇文章给大家带来的内容是关于css如何实现反方向圆角?(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 原理 父级元素 relative,子元素 absolute,然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 CSS样式 .wrappe…

    2025年12月24日
    000
  • css改变单选框颜色的方法实现(附代码)

    本篇文章给大家带来的内容是关于css改变单选框颜色的方法实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 是否曾经被业务提出”能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!”,然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开i…

    2025年12月24日
    000
  • css如何实现图片大于div时的居中显示(代码实例)

    本文给大家介绍css如何实现图片大于div时的居中显示(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 当图片大于p时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个p,如果直接将图片不设置宽高,将其外层p设置overflow:hidden;这时即使外层…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信