[Vue.js]学习笔记-Vue.js条件语句-v-else - 苏飞论坛

Vue.js添加语句-v-else学习笔记如下：

v-else 指令相当于是给 v-if 添加一个 "else" 块，如下实例所示：

实例

[C#] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

        <div v-if="0.2 > 0.5">

          Sorry

        </div>

        <div v-else>

          Not sorry

        </div>

</div>

        

<script>

new Vue({

  el: '#app'

})

</script>

</body>

</html>

运行结果如下：

(, 下载次数: 138)

从上例可以清晰的看到，在v-if中， 0.2>0.5 是标准的不成立的，为false，故 Sorry没有显示，而显示了v-else中的内容。

调整v-if条件语句，将v-if设置为true条件如下实例：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

        <div v-if="1 > 0.5">

          Sorry

        </div>

        <div v-else>

          Not sorry

        </div>

</div>

        

<script>

new Vue({

  el: '#app'

})

</script>

</body>

</html>

(, 下载次数: 142)

作者: 站长苏飞 时间: 2018-12-7 22:07
我只是路过打酱油的。

作者: liu 时间: 2018-12-9 18:52
真是难得给力的帖子啊。

欢迎光临苏飞论坛 (http://www.sufeinet.com/)