上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]循环绘制

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-10-8 09:36:18 | 显示全部楼层 | 阅读模式

前文

上节课我们学习了编辑框的数据绑定

这节课我们学习循环绘制

在以前的情况下,我们如果想绘制一个列表通常需要怎么做?

删除全部的元素,然后再绘制出来。

这样是极其麻烦的,我们不仅需要操作js对象数据,然后还需要操控dom树。

而使用js数据就不存在这样的事情,我们可以直接在模板使用指定与数据进行数据绑定。

当数据改变的时候自动进行绘制

说起来也难以理解,我们不如实战玩玩!

实战

图片.png

我们创建一个按钮。

然后对应的函数,来生成一个数组。

图片.png

大概就是循环counter次,往setlist中插入数据

图片.png

data函数中也要声明相应的变量。

然后我们编写模板

图片.png

这里使用了v-for-'item in setlist'

相当于每一次从setlist这个数组中按顺序取出一个项目

然后绘制一次,再反复进行循环,我们可以测试一下

如果说for相当于js中的循环命令

那么v-for就相当于vue中模板对数组的循环命令

图片.png

但是需要注意,这里的v-for没有绑定:key

在实际中我们一定要绑定:key,这是每次循环的唯一标识。

我们可以

图片.png

因为setlist中的id肯定是唯一的,所以我们可以放心的将他作为key进行设置。

如果数组中没有这样的唯一标识符,我们可以换一种方法,vue也给我们提供了语法糖。

图片.png

如果我们使用了

v-for='(item,index) in setlist'

会在循环的时候,自动往item里放置每次循环的项目,index作为循环的序列id,注意一定要加括号

图片.png

那么到这里我们就学习了v-for的使用方式

结语

撒花~

图片.png
混的人。

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-10-8 12:46:31 | 显示全部楼层

源码

// ==UserScript==
// @name         修改Vue3
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://bbs.tampermonkey.net.cn/forum.php
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @require      https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/vue.js
// @grant        unsafeWindow
// @grant      GM_getResourceText
// @grant      GM_addStyle
// ==/UserScript==
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
          <input v-model='textvalue' ></input>
          <button  @click='ModifyBtn'>Modify</button>
           <div id="counter">
          Counter: {{ counter }}
          <button  @click='ClickBtn'>Click Me!</button>
           </div>
                      <div>
          <button  @click='GenerateList'>GenerateListData</button>
           </div>
                  <div v-for='(item,index) in setlist' :key='index'>
                  {{item.name}}
                  <input v-model='item.value' ></input>

           </div>

    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
    data() {
        return {
            counter: 0,
            textvalue:'',
            setlist:[],
        }
    },
    methods:{
        ClickBtn(){
            console.log(this.counter,this.counter,typeof this.counter,typeof this.counter)
            this.counter++
        },
        ChangeBaolong(){
        },
        GenerateList(){
            this.setlist=[]
            for(let index=0;index<this.counter;index++){
                this.setlist.push({
                    id:index,
                    name:'无敌暴龙战士'+index,
                    value:156+index
                })
            }
        },
        ModifyBtn(){
            this.counter=this.textvalue
        }
    }
}
const app = Vue.createApp(Counter);
app.mount("#app");
混的人。
回复

使用道具 举报

136

主题

416

帖子

446

积分

版主

Rank: 7Rank: 7Rank: 7

积分
446

猫咪币纪念章三好学生活跃会员热心会员突出贡献中秋纪念章国庆纪念章宣传达人推广达人

发表于 2021-10-8 10:10:07 | 显示全部楼层
呜呜呜 别学了  我跟不上了
bilibili:陈公子的话   公众号:陈公子的话
回复

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-10-8 11:57:46 | 显示全部楼层
陈公子的话 发表于 2021-10-8 10:10
呜呜呜 别学了  我跟不上了

哥哥又不是不会vue!
混的人。
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表