<div
class="actual-score"
:contenteditable="$route.params.mode === 'edit'"
v-html="item.shijidefen"
@input="changeVal($event)"
@blur="verifyScore(item)"
:class="{'can-edit': $route.params.mode=='edit'&!item.isVerify}"
></div>
changeVal(e) {
this.editValue = e.target.innerHTML;
},
verifyScore(item) {
let { subList } = item;
let allScores = [];
subList.forEach(subItem => {
subItem.thirdList.forEach(thirdItem => {
allScores.push(thirdItem.fufenzhi);
});
});
if (!isPositiveInteger(this.editValue)) {
this.$message({
type: 'warning',
message: '请输入正整数'
});
return;
}
if (allScores.includes(this.editValue)) {
Vue.set(item, 'isVerify', true);
} else {
this.$message({
type: 'warning',
message: '实际得分包含于赋分值'
});
Vue.set(item, 'isVerify', false);
}
}

https://cloud.tencent.com/developer/ask/182315

vue.js从输入中的contenteditable元素获取innerhtml的更多相关文章

  1. 坑!vue.js在ios9中失效

    坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...

  2. 首个vue.js项目收尾中……

    前言: 4.26号入手vue.js+elementUI,迄今为止我们的工作应该可以暂时告一段落了:下周开始,又是新的“征程”. 过程:站在接近完成的角度来看这个项目,似乎的确有许多事情需要自己阐述. ...

  3. Vue.js源码中大量采用的ES6新特性介绍:模块、let、const

    1 关于ES6      ECMAScript6(以下简称ES6)是JavaScript语言的最新一代标准,发布于2015年6月,因为ECMA委员会决定从ES6起每年更新一次标准,因此ES6被改名为E ...

  4. 添加谷歌拓展程序 vue.js devtools过程中的问题

    在用vue做项目过程中,需要用到vue.js devtools,在从github上面clone下来代码,然后再npm install ,过程报错,然后更新npm包也是会有问题,以下是install的问 ...

  5. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  6. DOM中常见的元素获取方式

    1.getElementById获取元素    返回的是一个元素对象 var  timer = document.getElementById('time'); console.dir   打印返回元 ...

  7. Vue.js 2.x中事件总线(EvevntBus)及element-ui中全屏loading的使用

    事件总线(Event Bus)可以在vue项目的index.js文件中创建,也可以在一个独立的.vue文件中创建.使用时,在各个子组件中引入该组件即可. 项目中的全屏loading较多时,可以在根组件 ...

  8. js在页面中添加一个元素 —— 添加弹幕

    参考地址 [往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加 ] 一.创建 HTML <div class="right_liuyan"&g ...

  9. vue js 在组件中对数组使用splice() 遇到的坑。。。

    遇到的问题: 用el-dialog写了个子组件 要实现在子组件中增删数据 点击确定后把值返回给父组件 父组件在每次点开子组件时都会把自己的值传进去. //父组件传值 this.$refs.transf ...

  10. js删除数组中重复的元素

    1.方法一 将数组逐个搬到另一个数组中,当遇到重复元素时,不移动,若元素不重复则移动到新数组中 function unique(arr){ var len = arr.length; var resu ...

随机推荐

  1. Windows风格的个人网盘,支持文档在线编辑

    这是一个Windows页面风格的个人网盘,支持普通文本.文档.表格.xmind等在线编辑,支持Windows的小组件,例如计算器.WhiteBoard.python 等,其他更多功能待你来发现,也待你 ...

  2. java-导出pdf

    前言:   纯代码画pdf格式 <!-- iText PDF --> <dependency> <groupId>com.itextpdf</groupId& ...

  3. Head First Java学习:第十章-数字很重要

     1.Math 方法:最接近全局的方法 一种方法的行为不依靠实例变量值,方法对参数执行操作,但是操作不受实例变量状态影响,那么为了执行该方法去堆上建立对象实例比较浪费. 举例: Math mathOb ...

  4. 4 HTTP的“四层”和“七层”

    目录 1 四层:TCP/IP 网络分层模型 2 七层:OSI网络分层模型 3 TCP/IP 协议栈的工作方式 1 四层:TCP/IP 网络分层模型 四层是指TCP/IP 网络分层模型. 第一层:&qu ...

  5. Docker安装 配置

    Docker的技术原理: 1. Linux 命名空间(Namespaces) 进程命名空间:使得每个容器拥有独立的进程空间,互相隔离,不受其他容器影响. 网络命名空间:提供独立的网络栈,每个容器有自己 ...

  6. Zookeeper 的基本使用

    维基百科对 Zookeeper 的介绍如下所示: Apache ZooKeeper是 Apache 软件基金会的一个软件项目,它为大型分布式计算提供开源的分布式配置服务.同步服务和命名注册 ZooKe ...

  7. Java 并发编程(四)同步工具类

    本文使用的 JDK 版本为 JDK 8 基本同步工具类 闭锁(CountDownLatch) 闭锁是一种工具类,可以延迟线程的进度直到其到达终止状态.闭锁的作用相当与一扇门:在闭锁的状态到达之前,这扇 ...

  8. win10安装WSL

    一.什么是WSL? Windows Subsystem for Linux 简称 WSL,是一个在Windows 10上能够运行原生Linux二进制可执行文件(ELF格式)的兼容层. 二.如何安装WS ...

  9. 7、Flutter GridView网格布局组件(遍历)

    GridView创建网格列表主要有下面三种方式 1.可以通过GridView.count 实现网格布局    一行的 Widget 数量 class HomePage extends Stateles ...

  10. 华为云Classroom聚焦人才数字化转型,引领智慧教育改革新模式

    随着教育行业数字化转型进程加快,利用现代化云端技术手段,线上线下相结合方式建立的全新OMO产教融合一体化已成为行业趋势.华为云Classroom平台沉淀了华为多年研发实践经验和多种前沿技术,以赋能伙伴 ...