本来是这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
</head>
<body>
<div id="conditional-rendering">
<span v-if="seen">现在你看到我了</span>
</div>
<!-- Import Js -->
<script src='./main.js'>
</script>
</body>
</html>
main.js
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
改成这样了
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
</head>
<body>
<div id="conditional-rendering">
<span v-if="seen">现在你看到我了</span>
<span v-else="seen">现在你没看到我</span>
</div>
<!-- Import Js -->
<script src='./main.js'>
</script>
</body>
</html>
main.js
const ConditionalRendering = {
data() {
return {
seen: false
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')