大家好,又见面了,我是你们的朋友全栈君。
问题是这样的,
<div class="layui-btn-group">
<button class="layui-btn " @click="businessChange('bc01')"
:class="business=='bc01'?'layui-btn-normal':'layui-btn-primary'">1
</button>
<button class="layui-btn " @click="businessChange('bc02')"
:class="business=='bc02'?'layui-btn-normal':'layui-btn-primary'">2
</button>
</div>
<div v-if="business=='bc02'" >
<div class="layui-form pt20">
<div class="layui-row layui-form-item layui-col-space8">
<div class="layui-col-md3">
<label class="layui-form-label lg-label">2<i class="cred">*</i>:</label>
<div class="layui-input-block">
<div class="layui-col-md7">
<input type="text" class="layui-input" lay-verify="required"
v-model="serviceDefense" title="111" key="username-input">
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="business=='bc01'" >
<div class="layui-form pt20">
<div class="layui-row layui-form-item layui-col-space8">
<div class="layui-col-md3">
<label class="layui-form-label lg-label">机房:</label>
<div class="layui-input-block">
<select type="text" class="layui-select" name="select_computerRoomOne"
lay-filter="select_computerRoomOne" lay-verify="required" title="1">
<option value="">请选择机房111</option>
<option v-for="(item,index) in oneRoomList" :value="item.id">{
{item.roomName}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var form;
function cb() {
layui.use(['form'], function () {
form = layui.form
})
}
var vm = new Vue({
el: "#app",
data: {
business: "bc01",//业务配置
oneRoomList: [{
id:1,
roomName:"11"
}],
twoRoomList: [],
oaOrderMaster: {
},
serviceDefense:"ss"
},
methods: {
businessChange: function (type) {
this.business = type;
this.$nextTick(function () {
form.render()
})
}
},
mounted() {
cb();
}
})
</script>
第一个显示正常,第二个无缘无故多了个第一个的下拉框,经过尝试有和看文档后解决了,但还是懵懵懂懂不知说依然,
key
管理可复用的元素Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
那么在上面的代码中切换 loginType
将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input>
不会被替换掉——仅仅是替换了它的 placeholder
。
也不知道layui底层是怎么选择元素的,vue的if高效但是有时候也是麻烦
解决办法就是在v-if 加个key=’1′,每个都不一样 然后把
v-for="(item,index) in oneRoomList" 改成
v-for="item in oneRoomList"
不知道为什么这只是个索引啊
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152835.html原文链接:https://javaforall.cn