Vue 条件渲染

条件渲染

<template id="tem">
        <h2 v-if="isshow">hahahah </h2>
        <button @click="change"></button>
    </template>

<input type="text" v-model="score">
        <h2 v-if="score > 90">优秀</h2>
        <h2 v-else-if="score > 60">良好</h2>
        <h2 v-else>不及格</h2>

template he v-if

<template v-if="isShow">
            <h2>哈哈哈</h2>
            <h2>哈哈哈</h2>
            <h2>哈哈哈</h2>
        </template>
        <template v-else>
            <h2>呵呵呵</h2>
            <h2>呵呵呵</h2>
            <h2>呵呵呵</h2>
        </template> 

v-show 条件渲染

    <template id="tem">
        <h2 v-show="isshow">hahahah </h2>
        <button @click="change">显示/隐藏</button>
    </template>

v-show v-if 区别

 <input type="text" v-model="score">
<h1>{{panduan(score)}}</h1>

<template id="tem">
        <h2 v-if="isshow">哈哈哈</h2>
        
        <!-- v-show 改变的是style display:none -->
        <!-- 频繁操作 使用  dom操作少 -->
        
        <h2 v-show="isshow">hahahah </h2>
        <button @click="change">显示/隐藏</button>
    </template>

自己写的烂代码 能够动态判断成绩等级

 <input type="text" v-model="score">
const sc =[
        {score:90, res:"A"},
        {score:80, res:"B"},
        {score:70, res:"C"},
        {score:60, res:"D"},
        {score:0,res:"不及格"}

    ]
    panduan(s) {
                for(i=0;i<sc.length;i++){
                    if( s>=sc[i].score){
                        return sc[i].res
                        break
                    }   
                }
            }