vue 项目中遇到问题解决记录
目录 1、el-input标签中根据输入框的内容,实时计算某值2、要在弹出框中使用el-dialog标签触发弹出框时,弹出框层次要进行设置3、浏览器端缓存数据 下面针对localStorage 和 sessionStorage做个对比分析4、待续1、el-input标签中根据输入框的内容,实时计算某值 利用input属性触发某方法来进行计算 例如:&l...
目录
2、要在弹出框中使用el-dialog标签触发弹出框时,弹出框层次要进行设置
3、浏览器端缓存数据 下面针对localStorage 和 sessionStorage做个对比分析
1、el-input标签中根据输入框的内容,实时计算某值
利用input属性触发某方法来进行计算 例如:<el-input v-on:input="matchDataClick" v-model="form.financingMax" el-input>
对应的Js方法如下图
2、要在弹出框中使用el-dialog标签触发弹出框时,弹出框层次要进行设置
此种情况要在标签中添加 :modal-append-to-body="false" 来进行层级的设置 例如:
<el-dialog width="35%" title="提示" :visible.sync="dialogFormVisible" :modal-append-to-body="false"> ... ... </el-dialog>
3、浏览器端缓存数据 下面针对localStorage 和 sessionStorage做个对比分析
3.1 sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载。
3.2 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存储的本地相应文件夹中
3.3 sessionStorage和 localStorage的使用方法相同,如下
(1)保存:
//对象
const info = { name: 'hou', age: 24, id: '001' };
//字符串
const str="haha";
sessionStorage.setItem('hou', JSON.stringify(info));
sessionStorage.setItem('zheng', str);
(2)获取
var data1 = JSON.parse(localStorage.getItem('hou'));
var data2 = localStorage.getItem('zheng');
(3)删除
//删除某个
localStorage.removeItem('hou');
//删除所有
localStorage.clear();
(4)监听
Storage 发生变化(增加、更新、删除)时的 触发,同一个页面发生的改变不会触发,只会监听同一域名下其他页面改变 Storage
window.addEventListener('storage', function (e) {
console.log('key', e.key); console.log('oldValue', e.oldValue);
console.log('newValue', e.newValue); console.log('url', e.url);
})
(5)在浏览器中查看
4、给数组的对象添加checked(Boolean值)的属性
4.1 错误实例: 能赋值成功但是 复选框不能回显
Array.forEach(element => {
element.checked = false
})
4.2 正确操作:利用set方法进行添加属性 能赋值成功但是 且复选框能回显
Array.forEach(element => {
this.$set(element,'checked',false)
})
5、js中对象无关联复制
在js中复制对象,直接等于,如果操作元素据,复制的数据也发生改变,为了避免这种问题可用下面的代码复制,这样obj和element就没什么关联了。
var obj = JSON.parse(JSON.stringify(element))
更多推荐
所有评论(0)