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

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

[复制链接]
  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

    发表于 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
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

    发表于 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");
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2022-8-1 10:48
  • 签到天数: 94 天

    [LV.6]常住居民II

    142

    主题

    521

    帖子

    842

    积分

    版主

    Rank: 8Rank: 8

    积分
    842

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

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

    使用道具 举报

  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

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

    哥哥又不是不会vue!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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