<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{
{message}}</p>
<input v-model="message">
<div v-if="message === 'A'">
A
</div>
<div v-else-if="message === 'B'">
B
</div>
<div v-else-if="message === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'A'
}
})
//v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
</script>
</body>
</html>
vue条件渲染v-if，v-else简单应用
猜你喜欢
转载自blog.csdn.net/qq_42526440/article/details/114937769
今日推荐
周排行