博客提到实际操作中不能用@替代v-on指令，原因待解。还指出v-show在实际使用时，会在控制台生成display属性，若值为false则显示display：none，同时给出了index.html和app.js相关内容。
在此注意，虽然代码是没有问题的，但是在实际操作中是不能用@来替代v-on指令，原因我也不清楚，如果有大佬看到了希望帮忙评论区解答
v-show在实际使用过程中，会在控制台里面生产display的属性
如果是false
则display：none
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-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">网络连接成功</p>
-->
<p v-show="error">网络连接错误：404</p>
<p v-show="success">网络连接成功</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
//实例化VUE对象
new Vue({
el:"#vue-app",
//仅限于在vue-app容器下
data:{
error:false,
success:false
},
methods:{
},
computed:{
}
});
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
