Vue-指令v-if

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="style.css">
</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 Succes</button>
        <!--<p v-if="error">网络连接错误:404</p>-->
        <!--<p v-else-if="success">网络连接成功:200</p>-->
        <!--v-show加了个display-->
        <p v-show="error">网络连接错误:404</p>
        <p v-show="success">网络连接成功:200</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js

new Vue({
    el:"#vue-app",
    data:{
        error:false,
        success:false
    },
    methods:{
    },
    computed:{
    }
});

猜你喜欢

转载自blog.csdn.net/qq_42991834/article/details/90212176
今日推荐