<div id="app">
<div class="div1"></div>
<div class="div2"></div>
</div>
第一步，在HBuilder工具中已创建好的Web项目，指定目录下新建静态页面buttonClickhtml，如下图所示：
第二步，在title标签下引入vuejs核心JavaScript文件，注意压缩版本和开发版本，如下图所示：
如何使用Vuejs中的按钮点击事件并获取按钮属性
第三步，在<body></body>标签内，插入一个div和四个button，使用v-on绑定事件，如下图所示：
如何使用Vuejs中的按钮点击事件并获取按钮属性
第四步，在<div></div>标签下方，插入<script></script>标签，并在标签内编写事件函数，如下图所示：
如何使用Vuejs中的按钮点击事件并获取按钮属性
第五步，保存代码并在浏览器中查看结果，点击按钮，查看d出的结果，如下图所示：
如何使用Vuejs中的按钮点击事件并获取按钮属性
第六步，d出的结果为undefined，修改代码并在事件中传参数，然后再次查看结果，可以看到按钮的相关属性和方法（浏览器控制台），如下图所示：
如何使用Vuejs中的按钮点击事件并获取按钮属性
1dom结构
<div class="liveInDetailList">
<div class="liveInDetail" v-for="(item,index) inPersonNamelistguestList" :key="index">
<div class="infoDetail">
<span class="left">住客姓名</span>
<input type="text" placeholder="请输入姓名" class="searchRoomInp" autofocus="autofocus" v-model="itemname" ref="inputName" v-focus>
</div>
<div class="infoDetail">
<span class="left" >手机号</span>
<input type="text" placeholder="请输入手机号" class="searchRoomInp" v-model="itemmobilePhone" >
</div>
<div class="infoDetail">
<span class="left">身份z号</span>
<input type="text" placeholder="请输入身份z号" class="searchRoomInp" v-model="itemidCardNo">
</div>
<div class="handle" v-if="isShowDelete">
</div>
<div class="handle" v-else>
<i slot='rightIcon' class="iconfont icon-icon-shanchu deleterightIcon" @clickstop="delRoomCard(index)"></i>
</div>
</div>
</div>
2在data中定义
PersonNamelist:{
checkInRoomId:'',
guestList:[{id:"",name:"",mobilePhone:"",idCardNo:""}]
},
3点击新增
1定义一个obj
let obj={
id:"",
name:"",
mobilePhone:"",
idCardNo:""
}
2点击一下将obj添加进数组PersonNamelist
4该项目会从后台传来一个新增最多的人数所以需要判断下PersonNamelist中的guestList的长度
addPerson(){
let obj={
id:"",
name:"",
mobilePhone:"",
idCardNo:""
}
if(thisPersonNamelistguestListlength<(后台数据))
thisPersonNamelistguestListpush(obj)
}
else{
Toast({
message:'已超出该房间可住最大人数',
position:'bottom',
duration:1000,
className:'panduan'
});
}
}
在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而 *** 作该dom元素。
以下是个例子：
Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室，同样也能满足3D自由艺术家。
参与项目：
《阿凡达》《2012》《赤壁》《斯巴达克斯》《死不瞑目》《尸城30夜》《功夫熊猫》《异形大战铁血战士》《微光城市》《神奇四侠》《致命拜访》《冒牌天神》《与王一夜》《老友与钱》《加勒比海盗》《ALAUID》《假结婚》《特种部队》《失落的大陆》《终结者》《坠入地狱》《Dragonball Evolution》《女同志吸血鬼杀手》《爱丽丝梦游仙境》《诸神之战》《驯龙记》《狼人》《闰年》《可爱的骨头》《魔法奇幻秀》《美少女特工队》《吉诺密欧与朱丽叶》《纳尼亚传奇》《猫头鹰王国》《歪小子斯科特》《卑鄙的我》《最后的风之子》《怪物史瑞克》《波斯王子》《饥饿游戏》《地心历险记》《雨果》《亚瑟圣诞》《丁丁历险记》《惊天战神》《超级8》《雷神》《大战外星人》《本杰明·巴顿奇事》《马达加斯加》《澳洲乱世情》《空中杀手》《夺宝奇兵》《奇幻精灵事件簿》
可编辑div可能很简单 contenteditable="true" 就能实现了
但是，，，输入一个字的时候，焦点会自动跳到文本开头，很烦的有木有
在网上看见一个大神写的，引用过来，很久了，忘记了出处
将可编辑div单独设置成一个组件
子组件中
<template>
<div class="edit" placeholder="11"
v-html="innerText"
:contenteditable="canEdit"
@focus="isLocked =true"
@blur="isLocked =false"
@input="changeText">
</template>
watch: {
'value'(){
if (!thisisLocked && !thisinnerText) {
thisinnerText =thisvalue;
}
}
},
methods: {
changeText(){
this$emit('input', this$elinnerHTML);
}
},
父组件中只要 v-model='你想要绑定的数据'
对vue不熟悉，，当然这位大神也说看下官方文档v-model这一块
大致是如果父组件的v-model会首先绑定子组件的emit的input方法
先设置元素的ref，如 <div style="height: 500px" ref="tablewrap" ></div>，要获取该元素高度，必须先给该元素设置css高度
再用 windowgetComputedStyle(this$refstablewrap)height 获取
注意：用this$refs获取dom元素高度，必须在mounted钩子中，如下：
mounted() {
consolelog(windowgetComputedStyle(this$refstablewrap)height)
}
给element表格设置动态高度，就可以用上述方法
在data中定义变量
最后，在mounted钩子中设置表格的高度
1npm install html2canvas
2vue文件里引入 import html2canvas from 'html2canvas';
3<div class="char" id="char" ref="char"></div>
4方法如下
//转换格式的方法 直接使用就好 不需要知道为什么
dataURLToBlob(dataurl) {
let arr = dataurlsplit(',');
let mime = arr[0]match(/:();/)[1];
let bstr = atob(arr[1]);
let n = bstrlength;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstrcharCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
/保存的方法（即按钮点击触发的方法）
第一个参数为需要保存的div的id名
第二个参数为保存的名称 /
saveImage(divText, imgText) {
let canvasID = this$refs[divText];
let that = this;
let a = documentcreateElement('a');
html2canvas(canvasID)then(canvas => {
let dom = documentbodyappendChild(canvas);
domstyledisplay = 'none';
astyledisplay = 'none';
documentbodyremoveChild(dom);
let blob = thatdataURLToBlob(domtoDataURL('image/png'));
asetAttribute('href', URLcreateObjectURL(blob));
//这块是保存 *** 作 可以设置保存的的信息
asetAttribute('download', imgText + 'png');
documentbodyappendChild(a);
aclick();
URLrevokeObjectURL(blob);
documentbodyremoveChild(a);
});
},
5调用
thissaveImage('char', '测试');
以上就是关于vue作用于一个div上怎么传递数据到并列的div全部的内容，包括:vue作用于一个div上怎么传递数据到并列的div、如何使用Vue.js中的按钮点击事件并获取按钮属性、vue点击新增添加div框等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）