当前位置: 首页 > Web前端 > HTML

动态添加+动态绑定(vue数据驱动思想)

时间:2023-04-02 22:53:56 HTML

首先我们先来分析一下案例。选择科目时,会同时添加科目的满分值设置。以前写jquery的思路:勾选的时候创建一个dom节点,然后把dom节点追加到父节点上。项目前后分离交互,使设定科目的满分值不受约束。更进一步:先绑定所有设置满分值的input,再控制显示和隐藏。这样目的就达到了,但是一旦从后台获取options,一旦后台换了,这一边也要相应的换。充分利用数据驱动视图的思想:代码片段1.说明:该函数的作用是判断数组中是否包含函数传入的值。这里采用遍历的方式,对数组进行循环,看数组中对象的主体值是否与输入相等。如果相等,则表示数组中包含此项,表示该主题已经被勾选,必须将其删除。这里使用了splic方法(vue的mutation方法)来删除,直接改变原数组的值,发送Vue更新视图。2.描述:定义满分值循环的数组3.描述:这个数组就是上面CheckBox的数据4.描述:v-for循环的详细写法