首页<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <template> <div> <span @click="showImage = !showImage">胡图图</span> <img v-if="showImage" src="07111648929554.jpg" /> </div> </template> </div> <script> var vm = new Vue({ el: '#app', components: { 'my-component': { data() { return { showImage: false } } } } }); </script> </body> </html>找找点击字体图片无法显示的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <template> <div> <span @click="showImage = !showImage">胡图图</span> <img v-if="showImage" src="07111648929554.jpg" /> </div> </template> </div> <script> var vm = new Vue({ el: '#app', components: { 'my-component': { data() { return { showImage: false } } } } }); </script> </body> </html>找找点击字体图片无法显示的问题

时间: 2023-08-14 22:24:35 浏览: 88

在 HTML 代码中，Vue 组件的名称应该为 "my-component"，但是在模板中没有使用这个组件。因此，需要将组件名称添加到模板中： ``` <my-component></my-component> ``` 此外，需要将 `@click` 绑定到 `my-component` 组件而不是 `<span>` 元素上，并且需要将 `showImage` 数据属性移动到组件的 `data` 选项中。修改后的代码如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <template id="my-component"> <div> <span @click="showImage = !showImage">胡图图</span> <img v-if="showImage" src="07111648929554.jpg" /> </div> </template> <script> Vue.component('my-component', { template: '#my-component', data() { return { showImage: false } } }); var vm = new Vue({ el: '#app' }); </script> </body> </html> ```

阅读全文