<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.textcolor{
color:aquamarine;
}
.textsize{
font-size: 50px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vueApp">
<h1>Vue.js条件渲染简单学习</h1>
<div v-if="judge==1">judge is 1</div>
<div v-else-if="judge==2">judge is 2</div>
<div v-else-if="judge==3">judge is 3</div>
<div v-else-if="judge==4">judge is 4</div>
<div v-else>none</div>
</div>
</body>
<script>
let vueApp=new Vue({
el:"#vueApp",
data:{
judge:4,
},
}
);
</script>
</html>
Vue.js学习-13-条件渲染简单学习
原创
©著作权归作者所有:来自51CTO博客作者高万禄的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【Vue.js】007-条件渲染
一、v-if指令1、概述v-if 指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 为true的时候被渲染;可以使用
vue js javascript vue.js html -
Vue.js 学习笔记
我想要的,时间自然会给我。年龄也不会是我的阻碍,反而会是我的
数据 Vue html