Vue使用v-for与v-if搭配满足条件进行赋值，和v-if三目表达式的使用

最新推荐文章于 2025-03-13 07:30:00 发布

strive_day

最新推荐文章于 2025-03-13 07:30:00 发布

阅读量9.5k

点赞数 24

分类专栏：前端文章标签： java vue v-if v-for 三目表达式

本文链接：https://blog.csdn.net/qq_40542534/article/details/111086710

版权

前端专栏收录该内容

10 篇文章

订阅专栏

Vue使用v-for遍历的时候，通过{{}}进行赋值

{{user.companyName = item.companyName}}

<select class="form-control" v-model="user.companyId">
    <!-- 遍历所有的公司信息 -->
    <template v-for="item in allCompany">
        <option :value="item.companyId" v-if="user.companyId == item.companyId"  selected="selected">
      	    <!-- 使用{{}}进行赋值，将遍历选中的赋值给date数据companyName -->
            {{user.companyName = item.companyName}}
        </option>
        <option :value="item.companyId" v-else>{{item.companyName}}</option>
    </template>
</select>

Vue使用v-if的三目表达式进行赋值

v-if="user.companyId == item.companyId?user.companyName = item.companyName:''"

<select class="form-control" v-model="user.companyId">
    <!-- 遍历所有的公司信息 -->
    <template v-for="item in allCompany">
    	<!-- 使用三目表达式赋值 -->
        <option :value="item.companyId" v-if="user.companyId == item.companyId?user.companyName = item.companyName:''"  selected="selected">
        </option>
        <option :value="item.companyId" v-else>{{item.companyName}}</option>
    </template>
</select>