VUE小知识点
1、通过data中的list循环图片IMG
在data中需要添加 require(),如 {name:"打卡",src:require("@/assets/pages/projectImages/qd.png")}
2、获取元素的data属性
前台:
<a :data-rel="site.src" @click="jump($event)" >
JS:
jump(e){ var a=e.currentTarget.dataset.rel; console.log(a); }
3、JS里进行跳转
html : <button @click="hreftwo" class="test-one">点我到第二个页面</button>js : methods:{ //跳转页面 hreftwo(){ this.$router.push({path:'/two'}) } }
4、向data中赋值
let that=this; that.center=0;//center为data中的属性
5、VUE中循环list
<div class="list" v-for="v in deviceList" v-bind:key="v.ID"> <div class="qingkuang"> <a href="#" class="yc">故障</a> </div> <div class="item"> <label class="label">设备编号</label> <div class="block">{{v.Number}}</div> </div> <div class="item"> <label class="label">安装位置</label> <div class="block">{{v.Local}}</div> </div> <div class="item"> <label class="label">登录时间</label> <div class="block">{{v.LastLoginTime}}</div> </div> <span class="chakan"> <a> <van-icon name="notes-o" size="25" />查看 </a> </span> <span class="xiugai"> <a> <van-icon name="edit" size="25" />修改 </a> </span> </div>
6、获取URL中的参数
var id=this.$route.query.id;
7、编写全局可调用方法
以调用Vant的Notify为例。 在main.js中,先import: import { Notify } from 'vant'; Vue.use(Notify); 然后,再设置上全局方法: Vue.prototype.Notify = function(msg) { Notify(msg) } 这样在任何一个VUE页面中,可this.Notify('通知') 即可全局调用