本案例需引入VUE及JQ

https://cdn.staticfile.org/vue/2.2.2/vue.min.js https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js

VUE代码

let demoapp = new Vue({
    //appID
    el: '#a3',
    data: {
        datalist: [],
    },
    methods: {
        //加载全部
        loadQuestions: function () {
            $.ajax({
                url: '接口地址',
                method: "GET",
                success: function (r) {
                    if (r.code === OK) {
                        questionsApp.fundall = r.date;
                    };
                }
            });
        },
        //按钮功能
        money: function (id,index) {
            $.ajax({
                url: '接口地址',
                method: "GET",
                success: function (r) {
                    if (r.code === OK) {
                        console.log('数据获取成功')
                    };
                }
            });
            
        },
    },
    //页面加载完就执行
    created: function () {
        this.loadQuestions();
    }
});

HTML代码

&ltdiv class="bigbox" id="a3">
//v-for="(自定字段名,自身排在当前第几位) in vue中获取的数据"
	&ltdiv class="imgbox" v-for="(fu,index) in datalist" >
//@click="vue中函数(传值)"
		&lta class="badge-pill" id="bt1" cursor:pointer @click="money(fu.id,index)"></a>
//v-bind:src在下方被用来响应地更新 HTML 属性
		&ltimg v-bind:src="fu.imgurl" class="smallimg" alt=""  id="a3_1" @click="onicke(fu.tianurl,fu.name)">
		&ltdiv style="margin-left: 20px;font-size: 13px"  id="dcountss3"&gt持有份额：&ltspan v-text="fu.money"></span></div>
//v-bind:style判断数据中值后更改css样式
		&ltdiv style="margin-left: 20px;font-size: 13px" id="countss4"&gt持有收益：&ltspan  v-text="fu.semoney" v-bind:style="'color:'+(fu.semoney&gt0?'red':'green')+';'"></span></div>
//v-bind:id在下方被用来动态添加id
		&ltdiv v-bind:id="'inputHelpBlock'+fu.id" class="inputsss">
			&ltinput type="text" placeholder="请输入内容" v-bind:id="'beizhu'+fu.id">
			&lta class="badge-pill bg-success text-white"  @click="edits(fu.id)">&lti class="fa fa-check-square"></i></a>
		</div>
	</div>
</div>