独一无二的哈密瓜 2022-10-20 16:31 采纳率: 85.7%
浏览 39
已结题

Vue组件问题, 不知道为什么浏览器不显示

img

这个在浏览器不显示内容, 是哪部分问题


<!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="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <template id="child">
            <div>
                我是<hr/>自己的组</hr>件内容
                引用组件中的模型数据:{{msg}}
                <hr/>
                <input type="button" @click="child_one()" value="敢点我吗">
            </div>  
     </template>
</body>
</html>        
<script>
    var zj={
           template:'#child', 
           data:function(){
               return {
                 msg:"我是子组件的模型数据"
               }
           },
           methods:{
                child_one:function(){
                    alert('我点不死你...');
                }
           }
     };
</script>

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-10-20 16:38
    关注
    
    <!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="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    </head>
    
    <body>
        <template id="child">
            <div>
                我是
                <hr />自己的组</hr>件内容
                引用组件中的模型数据:{{msg}}
                <hr />
                <input type="button" @click="child_one()" value="敢点我吗">
            </div>
        </template>
    </body>
    <script>
        // var zj = {
        //     template: '#child',
        //     data: function () {
        //         return {
        //             msg: "我是子组件的模型数据"
        //         }
        //     },
        //     methods: {
        //         child_one: function () {
        //             alert('我点不死你...');
        //         }
        //     }
        // };
    
    
        const app = new Vue({
            // 挂载要管理的元素
            el: '#child',
            data: function () {
                return {
                    msg: "我是子组件的模型数据"
                }
            },
            methods: {
                child_one: function () {
                    alert('我点不死你...');
                }
            }
          
        })
    </script>
    
    </html>
    
    

    需要写在 new Vue里

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月21日
  • 已采纳回答 10月20日
  • 创建了问题 10月20日

悬赏问题

  • ¥15 有了解d3和topogram.js库的吗?有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar,时序沉降图怎么画
  • ¥15 unity第一人称射击小游戏,有demo,在原脚本的基础上进行修改以达到要求
  • ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
  • ¥15 关于#Java#的问题,如何解决?
  • ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line