本次主要介绍Vue的基本指令：v-if。
使用工具：HbuilderX
v-if是什么
v-if 是vue的分支语句，即控制分支流程。有v-if，就有v-if-else，就有v-else；和if,if else, else 在概念上是基本一致的。只是需要注意，v-else是不需要绑定vue中的属性的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdnWebPage</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id='app'>
<h1 style='color: green;' v-if='testcases.result === "success"'>{{ testcases }}</h1>
<h1 style='color: yellow;' v-else-if='testcases.result === "fail"'>{{ testcases }}</h1>
<h1 style='color: red;' v-else'>{{ testcases }}</h1>
</div>
<script>
var csdnWeb = {
data() {
return {
testcases: {
id: 1,
name: '登录案例',
result: 'success',
},
}
},
methods: {},
};
var App = Vue.createApp(csdnWeb)
App.mount('#app')
</script>
</body>
</html>运行结果如下：
如果result 值是 success，则字体会显示为绿色。而如果是faile，则显示为黄色，但因为我们只有一条数据，没有result值为fail的，所以没有显示。那我们依次将data中的result数据改为 fail、error 来看看效果：
v-if 和v-show
v-if 和 v-show 在肉眼观看上的效果比较类似，但实际上，相比较于v-show而言，v-if 更耗性能，它是直接将不符合条件的元素删除，而v-show只是不显示。
下一篇：介绍...循环语句
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
