12345678910111213141516171819202122232425262728293031323334353637383940 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>模板</title>
- <!-- 引入文件 -->
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- </head>
- <body>
- <div id="app">
- <div v-if="flag">
- <img src="imgs/off.gif">
- </div>
- <div v-else>
- <img src="imgs/on.gif">
- </div>
- <button @click="changeBut(1)">打开</button>
- <button @click="changeBut(0)">关闭</button>
- </div>
- </body>
- <script>
- const { createApp, ref } = Vue;
- createApp({
- setup() {
- let flag = ref(true);
- function changeBut( i ){
- if (i== 1){
- flag.value = false;
- } else {
- flag.value = true;
- }
- }
- return {
- flag,changeBut
- };
- }
- }).mount('#app'); //createApp创建对象 挂在到app
- </script>
- </html>
|