qw
/
soilgd


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue 3 CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{ web.show }} <br>
        <p v-show="web.show">请问是</p>
        <p v-if="web.show">www.baidu.com</p>
        <button @click="toggle">显示</button>

        <p v-if="web.user < 1000">新网站</p>
        <p v-else-if="web.user >= 1000 && web.user < 10000">好网站</p>
        <p v-else>牛网站</p>
    </div>
    
      <script type="module">
        const { createApp, reactive } = Vue;

        createApp({
          setup() {
            // 定义响应式数据
            const web = reactive({
              show: true,
              user: 200000
            });

            const toggle = () =>{
                web.show = !web.show
            }
    
            return {
              web,
              toggle
            };
          }
        }).mount('#app'); // 挂载到DOM元素上
      </script>
</body>
</html>