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

李恒道

前文

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

这节课我们学习循环绘制

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

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

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

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

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

说起来也难以理解，我们不如实战玩玩！

实战

我们创建一个按钮。

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

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

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

然后我们编写模板

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

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

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

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

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

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

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

我们可以

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

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

如果我们使用了

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

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

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

结语

撒花~

李恒道

源码

// ==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");

陈公子的话

呜呜呜 别学了  我跟不上了

李恒道

陈公子的话 发表于 2021-10-8 10:10
呜呜呜 别学了  我跟不上了

哥哥又不是不会vue！