vue记录
vue项目中使用默认图片代替异常图片
- 第一种方法
<img onerror="javascript:this.src='../../static/custom.png';" class="customerHead" :src="param.customerHead" alt="">
图片不存在时,触发 onerror,显示custom.png
- 第二种方法
<img :onerror="errpic" class="customerHead" :src="param.customerHead" alt="">
data() {
return {
errpic:'this.src="' + require('../../assets/img/errpic.png') + '"',
}
}
vue 替换图片
<img :src="calcuImgUrl" alt="">
data() {
return {
calcuImgUrl:require('../../assets/img/calcu0.png')
}
}
mounted(){if(G.calculateState=="2"){
this.calcuImgUrl = require('../../assets/img/calcu2.png');
}
},
vue watch 监听
watch:{
param:{
handler(val,oldval){
var ct=this.param.certificate;
var cf=this.param.certificateNum;
if((ct==""||ct==null)&&(cf==""||cf==null)){
this.disabled_startname=true;
this.disabledInput=true;
this.disabledVild=true;
}
},
deep:true //深度监听
}
},
vue computed 计算属性
computed:{
complate_message(){
if(this.param.weight !== "" && this.param.height !==""){
let BMI =Math.round(this.param.weight/((this.param.height/100)*(this.param.height/100))*10)/10
return BMI
}else{
return 0
}
},
},
vue disabled属性更改
<div class="public_container">
<li class="style-li-css6">证件号码:</li>
<input type="text" ref="certificateNum"v-on:blur="changeAge(param.certificateNum)" v-model="param.certificateNum">
</li>
</div>
<div class="customer_sex" style="float:left;line-height:2;margin-left:35px;">
<el-checkbox :label="1" v-model="param.checked" @change="changeVid(param.checked)"
v-bind:disabled="disabledVild">长期有效</el-checkbox>
</div>
data(){
return {
disabledVild:false
}
}
methods:{
onSelectedDrug(event,value) {
if(value=="4"|value=="6"){
this.disabledVild=true;
}
}
vue记录的更多相关文章
- Vue 记录 Cannot read property '_withTask' of undefined
第二次遇到,年前偶尔代码中频繁出现过,因为没影响到交互,赶工期中,没有去深究. 今天又遇到了, 在事件触发后,脚本报错,终止了界面交互. 最后查找到这里的原因,检查并移除无效业务事件,错误消失了. ( ...
- 移动端弹性滑动以及vue记录滑动位置
-webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 ...
- vue记录错误和警告日志
https://blog.csdn.net/lucky___star/article/details/95491657 https://blog.csdn.net/weixin_34204057/ar ...
- 前端bug记录
记录一下前端入门时期遇到的一些bug. 1.同步.异步问题 背景:Javascript语言的执行环境是单线程.即一次只能完成一个任务.若有多个任务则需排队逐个执行——前一个任务完成,再执行后一个任务. ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录(六)- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
- vue实战记录(四)- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- vue实战记录(三)- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
随机推荐
- Django 入门项目案例开发(中)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. 昨天已经描述了如何搭建Django的开发环境,今天描述业务流程,具体我们要实现一个什么样的业务 ...
- 深入理解JavaScript系列(40):设计模式之组合模式
介绍 组合模式(Composite)将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 常见的场景有asp.net里的控件机制(即control ...
- IIS 5.0 和 6.0 的 ASP.NET 应用程序生命周期概述
本主题概述 ASP.NET 应用程序的生命周期,列出了重要的生命周期事件,并描述了您编写的代码将如何适应于应用程序生命周期.本主题中的信息适用于 IIS 5.0 和 IIS 6.0.有关 IIS 7. ...
- jQuery 整体架构
不同于 jQuery 代码各个模块细节实现的晦涩难懂,jQuery 整体框架的结构十分清晰,按代码行文大致分为如上图所示的模块. 初看 jQuery 源码可能很容易一头雾水,因为 9000 行的代码感 ...
- css内容简介(层叠样式表)
css是对网页编辑的加色,是对其功能的渲染. 根据规范每个元素都有一个display属性,每个元素都有一个------------如div元素他的默认为block. 行内元素和块级元素 块级元素会占据 ...
- 二:Redis数据类型
一.nosql(非关系性数据库): mongoDB hbase redis nulch hive pig mahout zookeeper 二:redis 数据类型 1.存储string: 常用命令 ...
- js获取span标签的值
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8" ...
- ajax传json
需求 前台有许多字段需要用ajax传送给后台, 如果给直接将字段封装成JSON对象传给后台会很方便 解决 ajax 发送 var str = {"name":"xiaom ...
- Oracle Spatial GIS相关研究
1.Oracle Spatial 概念相关 Oracle Spatial 是Oracle 数据库强大的核心特性,包含了用于存储矢量数据类型.栅格数据类型和持续拓扑数据类型的原生数据类型.Oracle ...
- JavaWeb之JSP原理
1.为什么需要JSP? 在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要动态产生和改变.如果使用Servlet程序来输出只有局部内容需要改动的网页,其中所有的静态内容也需要程序员用jav ...