1、if,else:
<body>
<div id ="app">
<!-- 复杂判断还是推荐使用computed计算 -->
<h2 v-if="score >= 90">
<div>优秀</div>
</h2>
<h2 v-else-if="score >= 60">
<div>良好</div>
</h2>
<h2 v-else>
<div>不及格</div>
</h2>
{{message}}
</div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
message: 'Smallstars',
isShow: true,
score: 95
},
methods: {},
computed: {},
});
</script>
</body>
2、条件渲染：
<body>
<div id ="app">
<!-- 如果没有用key标识，会复用输入框，内容不会清空，key值设置需不同才行 -->
<span v-if="isUser">
<label for="username">用户账户</label>
<input type="text" id="username" placeholder="用户账户" key="username">
</span>
<span v-else="">
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="emil">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
message: 'Smallstars',
isUser: true
},
methods: {},
computed: {},
});
</script>
</body>