不能使用v-show 或者display:none;控制
<template>
<view class="container" >
<view class="content-box">
<view class="button-my" @tap="buttonClick">显示</view>
<input class="uni-input input-my" focus placeholder="自动获得焦点" />
<view v-if="ifshow">
<input class="uni-input input-my" focus placeholder="view" />
</view>
<!-- <view :class="viewShow=='1'?'show':'hide'">
<input class="uni-input input-my" focus placeholder="view" />
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
viewShow:'2',
ifshow:false
};
},
methods: {
buttonClick(){
this.viewShow = '1';
this.ifshow = !this.ifshow;
}
},
created() {
}
};
</script>
<style lang="scss" >
.input-my{
width: 100%;
height: 50rpx;
border: 1rpx solid #bbbbbb;
}
.button-my{
display: inline-block;
padding: 20rpx;
background-color: aquamarine;
font-size: 30px;
text-align: center;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
效果图
初始进来input.png
点击显示出发第二个input.png
网友评论