vuev-model双向绑定+watch监听事件（⼀）项⽬需求+效果图
1.需求
（2）点击具体模块，将点击的内容绑定到搜索框，同时查询出该模块的内容。 （3）删除搜索框内容，再次出现所有模块。
2.效果图：
（⼆）代码+代码解析
1.代码：
<template>
<div id="type">
<!--第⼀部分：标题栏-->
<van-nav-bar
title="我的审批"
right-text="更多"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"/>
<form action="/">
<van-search
v-model="processName"
placeholder="请输⼊学⽣姓名"
shape="round"
/>
新感觉f5
<!--第⼆部分：点击搜索框时，显⽰的下拉菜单-->
<van-row>
<!--后端显⽰的数据，每⾏显⽰3个，超过3个，⾃动到下⼀⾏-->
<van-col span="8" v-for="(item, i) of allProcessName":key="i" justify="center">
<van-col span="8" v-for="(item, i) of allProcessName":key="i" justify="center">
<van-cell-group v-show="isShow" @click="searchDetail(i)">
<van-field v-model="allProcessName[i] "/>
</van-cell-group>
</van-col>
</van-row>
<!--第三部分：内容(引⼊公共组件库)-->
<headComponent :type="typelist"></headComponent>
<div class="card" v-for="(item,index) in typelist":key="index" @click="detail" > <!--吸顶距离--> <van-sticky :offset-top="10">
<!--控制标题距离左边距离-->
<div >
<!--换⾏符-->
<br />
<!--状态颜⾊⼤⼩公共样式-->
<p class="sates">{{typelist[index].detailListModels[0].title}}</p>
<br />
<br />
<!--卡⽚显⽰第⼀⾏数据-->
<a class="titles">{{typelist[index].detailListModels[0].title}}:</a>
<a class="titles">{{typelist[index].detailListModels[0].content}}</a>
<br/>
<br/>
<!--卡⽚显⽰第⼆⾏数据-->
<a class="titles">{{typelist[index].detailListModels[1].title}}:</a>
<a class="titles">{{typelist[index].detailListModels[1].content}}</a>
</div>
</van-sticky>
</div>级配砾石
</form>
</div>
</template>
<script>
import headComponent from'@/components/headComponent'
export default{
data(){
return{
//后端返回的detailContent存放
allProcessName:[],
processName:'',
processId:[],
typelist:[],
isShow:true
}
},市场经济的特征
components:{
headComponent
},
methods:{
detail(){
//点击卡⽚，查看详情
this.$router.push({name:'approvalDetail'})
亲水铝箔
},
onClickLeft(){
//点击左侧按钮，回到初始化界⾯
this.$router.push({name:'initApproval'})
},
onClickRight(){
//点击导航栏更多按钮，跳转到更多页⾯
this.$router.push({name:'moreSpecificApproval'})
},
test(){
var vm =this;
// 调⽤后端查询的地址
var url = v.VUE_APP_BACKEND_URL+"/groupProcess/secondProcess/11";
// 后端地址为get请求
this.$(url).then((response)=>{
/
/循环数组⾥的值
for(let index =0; index < response.data.data.length; index++){
vm.processId.push(response.data.data[index].processId);
vm.allProcessName.push(response.data.data[index].processName);
}
//如果流程名称有值，则显⽰
if(vm.allProcessName){
vm.isShow=true;
}
},(error)=>{
//发⽣错误时，输出错误信息
console.log(error);
});
},
searchDetail(i){
var vm=this;
//点击具体模块，和搜索框，双向绑定
vm.processName =this.allProcessName[i];
vm.isShow=false
//点击具体模块，所有模块，不显⽰
vm.isShow=false;
console.log(vm.processName);
手足情未了
var url = v.VUE_APP_BACKEND_URL+'/detail/selectApprovalByProcessId/2/11' this.$(url).then((response)=>{
for(let index =0; index < response.data.data.length; index++){
}
},(error)=>{
//发⽣错误时，输出错误信息
console.log(error);
})
}
},
//页⾯初始化时显⽰的内容
created(){
寡核苷酸
},
//监听搜索框的变化
watch:{
//当搜索框没有数据时，显⽰具体模块，同时隐藏具体模块的内容
processName(newVal){
if(newVal ==""){
this.isShow =true;
}
}
}
};
2.代码解析
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议