Vue:v-if、v-else指令

来自CloudWiki
跳转至： 导航， 搜索

v-if和v-else是一对离不开的好兄弟，使用条件运算符判断时常用。需要说明的是，v-if可以单独使用，但是v-else的前面必须要有一个v-if的条件或者v-show指令（后面介绍），这个和我们编程的原理是一样一样的。

它们作为条件渲染指令，他们的基础语法如下：

v-if="expression",v-else;

注意这里的v-else可以不写，expression表达式是一个返回bool类型的属性或者表达式。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.js" type="text/javascript" charset="utf-8">

		</script>


		<title></title>
	</head>
    <body>
        <div id="app">
            <h1>姓名：<label v-text="Name"></label></h1>
            <h1>是否已婚：<span v-if="IsMarry">是</span></h1>
            <h1>大人or小孩：<span v-if="Age>18">大人</span><span v-else>小屁孩</span></h1>
            <h1>学校：{{ School }}</h1>
        </div>
    
        <script src="Content/vue/dist/vue.js"></script>
        <script type="text/javascript">
        //Model
        var data = {
            Name: '小明',
            IsMarry: true,
            Age: 20,
            School:'光明小学',
        }
    
        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
        });
        </script>
    </body>
</html>

效果

Vue2022040104.png

取自“http://www.openbrains.net/mediawiki/index.php?title=Vue:v-if、v-else指令&oldid=30051”