qw
/
soilgd


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839
							<!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>
        <button @click="toggle">显示</button>
    </div>
    
      <script type="module">
        const { createApp, reactive } = Vue;

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

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