vue提供了v­if和v­show两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来看一下使用两个指令各有什么效果:

  • **v­-if **: 如果vlaue为true, 当前标签会输出在页面中
  • v­-show : 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
  • v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
<!DOCTYPE html>
<html lang="en">

<head>
    
    
    
    <title>Document</title>
</head>


    <div>
        <div>
            <button>我是添加按钮,我一直在</button>
        </div>
        <div>
            <button v‐show="deleteButton">我是删除按钮,我通过v‐show控制显隐</button>
            <button v‐on:click="deleteButton = true">设置显示</button>
            <button v‐on:click="deleteButton = false">设置隐藏</button>
        </div>
        <div>
            <button v‐if="editButton">我是修改按钮,我通过v‐if控制显隐</button>
            <button v‐on:click="editButton = true">设置显示</button>
            <button v‐on:click="editButton = false">设置隐藏</button>
        </div>
    </div>




</html>

页面显示效果



上面我们已经了解了v-­if的使用方法。事实上,v­if的条件渲染和JavaScript条件判断语

句中的if、else、else if非常类似。

**v-­else、v­-else­if **: 与v-­if一起使用, 如果value为false, 将当前标签输出到页面中

<!DOCTYPE html>
<html lang="en">

<head>
    
    
    
    <title>Document</title>
</head>


    <div>
        <div v‐if="number === 1">
            A
        </div>
        <div v‐elseif="number === 2">
            B
        </div>
        <div v‐else>
            C
        </div>
    </div>




</html>