vue05.html 1010 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>模板</title>
  6. <!-- 引入文件 -->
  7. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <div v-if="flag">
  12. <img src="imgs/off.gif">
  13. </div>
  14. <div v-else>
  15. <img src="imgs/on.gif">
  16. </div>
  17. <button @click="changeBut(1)">打开</button>
  18. <button @click="changeBut(0)">关闭</button>
  19. </div>
  20. </body>
  21. <script>
  22. const { createApp, ref } = Vue;
  23. createApp({
  24. setup() {
  25. let flag = ref(true);
  26. function changeBut( i ){
  27. if (i== 1){
  28. flag.value = false;
  29. } else {
  30. flag.value = true;
  31. }
  32. }
  33. return {
  34. flag,changeBut
  35. };
  36. }
  37. }).mount('#app'); //createApp创建对象 挂在到app
  38. </script>
  39. </html>