• 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记录的更多相关文章

  1. Vue 记录 Cannot read property '_withTask' of undefined

    第二次遇到,年前偶尔代码中频繁出现过,因为没影响到交互,赶工期中,没有去深究. 今天又遇到了, 在事件触发后,脚本报错,终止了界面交互. 最后查找到这里的原因,检查并移除无效业务事件,错误消失了. ( ...

  2. 移动端弹性滑动以及vue记录滑动位置

    -webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 ...

  3. vue记录错误和警告日志

    https://blog.csdn.net/lucky___star/article/details/95491657 https://blog.csdn.net/weixin_34204057/ar ...

  4. 前端bug记录

    记录一下前端入门时期遇到的一些bug. 1.同步.异步问题 背景:Javascript语言的执行环境是单线程.即一次只能完成一个任务.若有多个任务则需排队逐个执行——前一个任务完成,再执行后一个任务. ...

  5. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  6. vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  7. vue实战记录(六)- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

  8. vue实战记录(四)- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  9. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

随机推荐

  1. Xcode 常用路径收集

    Xcode证书 路径: ~/Library/MobileDevice/Provisioning Profiles Xcode 插件路径: ~/Library/Application Support/D ...

  2. linq——常用方法

    take  前几 skip   跳过前几 takeWhile   var firstNumbersLessThan6 = numbers.TakeWhile(n => n < 6);  / ...

  3. Java Native Interface Specification Contents 翻译

    https://docs.oracle.com/en/java/javase/12/docs/specs/jni/index.html Google翻译 第1章:简介 本章介绍Java Native ...

  4. 流畅的python和cookbook学习笔记(一)

    1.数据结构 1.1 内置序列类型 四种序列类型: 1.容器序列:list.tuple和collections.deque 2.扁平序列:str.bytes.bytearray.memoryview和 ...

  5. hdu 1011 树形背包

    http://blog.csdn.net/libin56842/article/details/9876503 这道题和poj 1155的区别是: poj1155是边的价值,所以从边的关系入手 hdu ...

  6. radio 实现点击两次 第一次点击选中第二次点击取消

    由于项目的需求,要求radio点击两次后为取消状态,不方便修改为checkbox,可以用正面的方法实现. // jquery $('input:radio').click(function(){ // ...

  7. 排序算法Nb三人组-快速排序

    核心思想: 将列表中第一个元素拿出来,放到一边,左右两个循环,左面的大于拿出来的数,就把他挪到右面, 右面的小于拿出来的数就把他放在左面,这是列表被第一个元素''分''为两个列表,在对两个列表进行同样 ...

  8. centos yum安装常用命令

    安装killall命令 yum install -y psmisc 安装sz(下载)和rz(上传)命令 yum install -y lrzsz 安装 ifconfig 命令 yum install ...

  9. CSS清浮动方法总结

    浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题 1. 给父元素指定高度 <div style="height:200px"> <div sty ...

  10. Activiti 配置Oracle不能自动创建表解决方法

    使用配置文件创建工作流表 <bean id="processEngineConfiguration" class="org.activiti.engine.impl ...