v-if
1、可以在页面提交前和提交后具有差别的时候使用(很好用),可以少写几个页面
v-if="item.Index===false"
v-else
2、可以显示从不同模块进来显示的不同数据
v-if="index==0"
v-if="index==1"
v-if="index==2"
v-if="index==3"
3、当使用v-if时,会出现页面先执行if的语句,再加载else的语句,即页面同一个地方会出现闪跳(出现一个模块如何被另外一个模块替代)。这时可通过定义一个字段,使其为false,在页面渲染后使其变为true,就可以让else语句直接出现,就不会出现闪跳。
4、当页面进行跳转时,由于下一个页面的methods会在created中进行加载,所以console会报错(没有数据),这个时候v-if也可以用,但是使用后页面加载会停顿一点
data: {
flag: false,
},
methods: {
Add: function () {
var self = this;
$.post("@Url.Action("XXX", "xx")", function (res) {
self.flag = true;
});
}
},
v-if="flag"
getQueryString
从上个页面传参数过来,让当前页面可以连接数据
1、不要传太多,容易混乱
window.location.href = '@Url.Action("页面名称", "页面所在文件夹名称")/?index=' + key ;
index: getQueryString("key"),
v-for
1、不是所有data里面的数组显示数据需要写v-for循环
2、在循环数组的时候,要注意key(该数组的key)和type(传进来的数据种类)的区别使用,同时需要看打印的数据,是否使用错乱(就是把下个模块的数据传到上个模块)。
post
$.post("@Url.Action("XXX", "xx")", { 传进来的参数 }, function (res) {
//res时传进来的数据
}
异步加载,是指两个post同时加载、同时传入。因为想要使用第一个post请求得到的数据库的model数据,因此在第二个post请求的{传参}地方写了model.id,但实际上使获取不到的。
因为是异步加载,即使第二个post请求下console.log(this.model.id)可以打印出来,那是因为第二个post请求的{ 传参 }地方已经加载完成了,但是第一个post请求还未加载完,所以此时model数组里面使空的,所以{传参}中获取model数组中的值是空的
layui-form
1、form.render()页面重新渲染
2、form.render很重要,不能乱放,在最外层需要放一个
3、当vue和form一起运行的时候,可能存在vue会使form加载不出来的情况,需要注意
4、可在vue的methods中写获取数据的方法,方法再在生命周期created中运行(不能用beforeCreate,因为这个时候Vue还没加载出来)
5、需在vue生命周期mounted中写form重新渲染的方法,重点是再运行一次获取数据的方法
layui
1、required是指不可为空
2、可通过lay-verify="tit"定义方法,实现一些基本功能,例如不能为空,不能重复提交
<textarea class="layui-input" lay-verify="required" v-if="index==''"></textarea>
<textarea class="layui-input" lay-verify="tit" disabled v-else>{{index}}</textarea>
form.verify({
tit: function (value) {
console.log(value);
if (value != '') {
return '您已经提交过,无需再次提交';
}
}
})
background-image
1、文字为白,通过background-image,可以使文字看起来像在轮播变色