vue.js条件判断

1.v-if的使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>v-if的使用title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<h1 v-if = "isShow">
				<div>abcdiv>
				<div>abcdiv>
				<div>abcdiv>
				<div>abcdiv>
				<div>abcdiv>
				<div>{{message}}div>
			h1>
		div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue",
					isShow:true
				}
			});
		script>
	body>
html>

2.v-if和v-else的使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>v-if和v-else的使用title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<h1 v-if = "isShow">
				<div>abcdiv>
				<div>abcdiv>
				<div>abcdiv>
				<div>abcdiv>
				<div>abcdiv>
				<div>{{message}}div>
			h1>
			<h2 v-else>当isShow时候显示我h2>
		div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue",
					isShow:true
				}
			});
		script>
	body>
html>

3.v-if和v-else-if的使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>v-if和v-else-if的使用title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<h1 v-if = "score>=90">优秀h1>
			<h1 v-else-if = "score >= 80">良好h1>
			<h1 v-else-if = "score >=60">及格h1>
			<h1 v-else>不及格h1>
			
			<h2>{{result}}h2>
		div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					score:90
				},
				computed:{
					result() {
						let ShowMessage = '';
						if(this.score >= 90){
							ShowMessage = '优秀';
						}else if(this.score >= 80){
							ShowMessage = '良好';
						}else if(this.score >= 60){
							ShowMessage = '及格';
						}else{
							ShowMessage = '不及格';
						}
						return ShowMessage;
					}
				}
			});
		script>
	body>
html>

你可能感兴趣的:(Vue.js,vue.js,javascript,前端)