<template>
<div class="pieAll" >
<template v-for="(item, index) in testData.data">
<!--按钮组-->
<div id="btnBox">
<div>
<ul>
<template v-for="items in item.event">
<li @click='getEventName(items)' :data-id="items.eventName">
<!--<span :class="className"></span>-->
<a href="javascript:;">{{items.className}}</a>
</li>
</template>
</ul>
</div>
<div></div>
<div><input type="text" v-model="search[index]" class="search" placeholder="请输入内容"></div>
</div>
<!--handsontable展示-->
<div :id="item.componentId" v-show='hotSettings'></div>
<!--搜索框--> </template>
<div> </div>
</div>
</template>
data(){
return {
btn:[],
routers: [],
hotSettings: {},
isShowImport: false,
objHot:'',
editData:[],// 修改的位置 testData:'',// 测试数据
isActive:false,// 是否显示搜索框,
search:[]
}
},

在data中定义一个空的数组;

在模板中v-model中,定义好即可;

这只是其中的一种,我觉得还应该有更好的方法,希望大家指出~~

动态绑定v-model的更多相关文章

  1. 什么是V模型?使用SDLC和STLC学习案例研究

    本教程详细介绍了软件/系统开发生命周期(SDLC),如瀑布循环和迭代循环,如RAID和Agile.此外,它继续解释测试的V模型和STLC(软件测试生命周期). 假设为您分配了一项任务,即为客户开发自定 ...

  2. 不可错过的效能利器「GitHub 热点速览 v.22.39」

    如果你是一名前端工程师且维护着多个网站,不妨试试本周榜上有名的 HTML-first 的 Qwik,提升网站访问速度只用一招.除了提升网站加载速度的 Qwik,本周周榜上榜的 Whisper 也是一个 ...

  3. Vue基础知识之常用属性和事件修饰符(二)

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

  4. Vue(1)

    一:概述 Vue是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关心视图层,不仅易于上手,还便于与第三方库或既有项目 ...

  5. Building the Testing Pipeline

    This essay is a part of my knowledge sharing session slides which are shared for development and qua ...

  6. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  7. opengles 矩阵计算

    总的变换矩阵: matrix = projection * view * model 模型矩阵: modelMatrix=translateMatrix * scaleMatrix * rotateM ...

  8. 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  9. backbone学习总结(二)

    今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理 通过 Bac ...

  10. yii2框架增删改查案例

    //解除绑定蓝牙 //http://www.520m.com.cn/api/pet/remove-binding?healthy_id=72&pet_id=100477&access- ...

随机推荐

  1. 5.AOP配置与应用(annotation的方式)

    步骤: a)在beans.xml文件中加上对应的xsd文件 spring-aop.xsd b)加上<aop:aspectj-autoproxy>,使用aspectj来完成aop <! ...

  2. 接收端通过Request.InputStream读取流

    以下有两种方式可以获取响应的数据流 1. 接收端通过Request.InputStream读取流 public static string StreamRead() { byte[] byts = n ...

  3. Python学习记录7-继承

    面向对象的三大特性 封装 继承 多态 封装 封装就是对对象的成员进行访问限制 封装的三个级别: 公开,public 受保护的,protected 私有的,private public,private, ...

  4. 网络编程基础之TCP学习(二)编程案例

    TCP网络编程流程如下: 实现功能:服务器端与客户端成功通讯后返回get! 服务器端程序 #include <netdb.h> #include <sys/socket.h> ...

  5. (十一)tina | openwrt关闭调试串口(DEBUG UART)

    //编辑以下文件 vi target/allwinner/astar-parrot/base-files/etc/inittab  //不同系统文件路径注意更改 //文件内容如下,注释::askcon ...

  6. centos7支持exfat

    centos7支持exfat https://blog.csdn.net/shile/article/details/52202030 sudo rpm -Uvh http://li.nux.ro/d ...

  7. 【NOIP/CSP2019】D1T2 括号树

    原题: 因为是NOIP题,所以首先先看特殊数据,前35分是一条长度不超过2000的链,N^2枚举所有子区间暴力check就能拿到分 其次可以思考特殊情况,一条链的情况怎么做 OI系列赛事的特殊性质分很 ...

  8. WebRTC基于GCC的拥塞控制算法[转载]

    实时流媒体应用的最大特点是实时性,而延迟是实时性的最大敌人.从媒体收发端来讲,媒体数据的处理速度是造成延迟的重要原因:而从传输角度来讲,网络拥塞则是造成延迟的最主要原因.网络拥塞可能造成数据包丢失,也 ...

  9. js实现QQ跳转到支付宝APP并领取红包!附:动图demo

    前天我在sg开源了js实现微信跳转到支付宝并领红包的代码.https://segmentfault.com/a/11...于是朋友圈开始刷屏,各种套路,各种标题,再附上短链接,引起了很多人的好奇,然后 ...

  10. JAVA-WEB-简单的四则运算

    首先附上选择题目数量和每行题数的JSP代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...