Vue联动下拉框默认选中

2022-07-04 10:15:23

控制器里

<?phpnamespaceapp\index\controller;usethink\Controller;usethink\Db;classIndexextendsController{publicfunctionindex(){return$this->fetch('index');}publicfunctionindexs(){$data=Db::name('ts_d_area')->where('fid',1)->select();echojson_encode($data);}}

看下这个$data哈:

返回来的$data是中国所有的省份,到前台后成json格式

在这里插入图片描述

视图里

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>Document</title></head><scriptsrc="http://www.jq22.com/jquery/jquery-3.3.1.js"></script><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script><body><formid="app5"><select><optionv-for="datas in province"selected="selected"v-if="datas.aname==moren">{{datas.aname}}</option><optionv-else>{{datas.aname}}</option></select><inputtype="button"value="提交"@click="ceshi"></form></body><script>var app5=newVue({
            el:'#app5',
            data:{
                province:'',
                moren:'山东省',},
            methods:{
                indexs:function(){this.$http.post('{:url("Index/indexs")}').then(function(res){this.province=res.data;
                            console.log(this.province);}).catch(function(error){});},
                ceshi:function(){}},created(){this.indexs();}});</script></html>

我设置了一个默认的省份:moren山东省

效果展示

在这里插入图片描述

知识点扩展(必看!必看)

如果我不写v-else的那个option,这样只会出来默认的山东省,别的省就会没有了。写了v-else,所有的省就出来了,而且还是默认选中自己设定的那个省的。

为什么?为什么走了v-if 还走v-else呢?

这就牵扯到vue的作用域问题了。

这时,不能再用编程思想的if else来看待vue的if else了。

看下方代码,我写了两个默认值,一个山东一个河南,这样写的话两个条件都成立,因此出来山东和河南这两个省:
在这里插入图片描述
在这里插入图片描述

我又把v-else加上:
在这里插入图片描述
这样,所有的省都出来了,并且还有默认的。

在看下图,我在最下面加了一个不带条件判断的:
在这里插入图片描述
这时,就会报错,未发现aname:
在这里插入图片描述
说明下面的这个option由于没有判断条件,因此脱离了v-for的循环。

总结:在如果v-if满足第一条件,就显示符合条件的值, 剩下的值都在v-else中循环出来。

官方文档中这么讲:

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中

  • 作者:光头强儿
  • 原文链接:https://blog.csdn.net/qq_42249896/article/details/86531970
    更新时间:2022-07-04 10:15:23