Vue联动下拉框默认选中

最新推荐文章于 2024-04-28 11:51:31 发布

光头强儿

最新推荐文章于 2024-04-28 11:51:31 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端

本文链接：https://blog.youkuaiyun.com/qq_42249896/article/details/86531970

大前端专栏收录该内容

15 篇文章

订阅专栏

本文详细解析了在Vue框架中，如何正确地使用v-if与v-else指令，尤其是在v-for循环中的应用。通过具体示例，展示了如何结合v-for和v-if/v-else实现动态列表的条件渲染，以及这些指令在作用域中的行为差异。

`控制器里`：

<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch('index');
    }

    public function indexs()
    {
        $data=Db::name('ts_d_area')
            ->where('fid',1)
            ->select();
        echo json_encode($data);
    }
}

看下这个$data哈：

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

在这里插入图片描述

`视图里`：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<body>
<form id="app5">
    <select>
        <option v-for="datas in province" selected="selected" v-if="datas.aname==moren">{{datas.aname}}</option>
        <option v-else>{{datas.aname}}</option>
    </select>
    <input type="button" value="提交" @click="ceshi">
</form>
</body>
<script>
    var app5 = new Vue({
            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>