[油猴脚本开发指南]循环绘制
# 前文上节课我们学习了编辑框的数据绑定
这节课我们学习循环绘制
在以前的情况下，我们如果想绘制一个列表通常需要怎么做？
删除全部的元素，然后再绘制出来。
这样是极其麻烦的，我们不仅需要操作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的使用方式
# 结语
撒花~
# 源码
```javascript
// ==UserScript==
// @name 修改Vue3
// @namespace http://tampermonkey.net/
// @version 0.1
// @descriptiontry 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！
页:
[1]