一个码楼 2025-01-23 13:37 采纳率: 100%
浏览 22
已结题

JS中Vue怎么用不了


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的快速入门</title>
    <script src="C:\Users\梁杰\Desktop\Vue.js">
    </script>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing = "0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user,index) in users">
                <div id="app"><td>{{index+1}}</td></div>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender==1"></span>
                    <span v-if="user.gender==2"></span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span v-else style="color: red;">不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            users:[{
                name:"Tom",
                age:20,
                gender:1,
                score:78
            },{
                name:Rose,
                age:18,
                gender:2,
                score:78,
            },{
                name:"Jerry",
                age:26,
                gender:1,
                score:90
            },{
                name:"Tony",
                age:30,
                gender:1,
                score:52
            }]
        },
        methods: {
            
        }
    })
</script>
</html>

img

各位能不能告诉我为啥我的插值表达式没用

  • 写回答

7条回答 默认 最新

  • Halifax ‎ 2025-01-23 13:47
    关注

    使用vue的cdn地址的vue.js,同时修改部分代码,完整代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue的快速入门</title>
        <!-- 使用Vue CDN -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <table border="1" cellspacing="0" width="60%">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
                <tr align="center" v-for="(user,index) in users">
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>
                        <span v-if="user.gender==1"></span>
                        <span v-else></span>
                    </td>
                    <td>{{user.score}}</td>
                    <td>
                        <span v-if="user.score>=85">优秀</span>
                        <span v-else-if="user.score>=60">及格</span>
                        <span v-else style="color: red;">不及格</span>
                    </td>
                </tr>
            </table>
        </div>
    
        <script>
            new Vue({
                el: "#app",
                data: {
                    users: [{
                        name: "Tom",
                        age: 20,
                        gender: 1,
                        score: 78
                    }, {
                        name: "Rose",
                        age: 18,
                        gender: 2,
                        score: 86
                    }, {
                        name: "Jerry",
                        age: 26,
                        gender: 1,
                        score: 90
                    }, {
                        name: "Tony",
                        age: 30,
                        gender: 1,
                        score: 52
                    }]
                }
            })
        </script>
    </body>
    </html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(6条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 2月11日
  • 已采纳回答 2月11日
  • 创建了问题 1月23日