Vue中的 v-if 和 v-else-if 多层判断的用法

第一种用法：v-if —— v-else-if ——v-else<el-table-column prop="versionStatus" label="状态"><template slot-scope="scope"><p v-if="scope.row.versionStatus=='1'">在用</p&g...

UserGuan

8508人浏览 · 2019-12-16 21:43:47

UserGuan · 2019-12-16 21:43:47 发布

第一种用法：v-if —— v-else-if —— v-else

<el-table-column prop="versionStatus" label="状态">
    <template slot-scope="scope">					
        <p v-if="scope.row.versionStatus=='1'">在用</p>
        <p v-else-if="scope.row.versionStatus=='2'">过期</p>
        <p v-else-if="scope.row.versionStatus=='3'">作废</p>
        <p v-else-if="scope.row.versionStatus=='4'">停用</p>
        <p v-else>未知</p>					
    </template>
</el-table-column>

第二种用法：v-if —— v-else

<el-table-column prop="versionStatus" label="状态">
    <template slot-scope="scope">					
        <p v-if="scope.row.versionStatus=='1'">在用</p>
        <p v-if="scope.row.versionStatus=='2'">过期</p>
        <p v-if="scope.row.versionStatus=='3'">作废</p>
        <p v-if="scope.row.versionStatus=='4'">停用</p>
        <p v-else>未知</p>					
    </template>
</el-table-column>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^