v-if conditional instructions for rendering a content. This content will only return truthy value in the expression command when they were rendered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>v-if条件</h1>
<button v-on:click="error = !error">toggle Error</button>
<button v-on:click="success = !success">toggle Success</button>
<!-- <p v-if="error">网络连接错误： 404</p>
<p v-else-if="success">网络连接成功： 200</p> -->
<p v-show="error">404</p>
<p v-show="success">200</p>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>app.js
new Vue({
el: '#app',
data: {
error: false,
success: false
},
methods: {
},
computed: {
}
});