Vue基础知识

最新推荐文章于 2024-07-22 08:55:10 发布

Zane:)

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量690

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51429898/article/details/135842846

版权

Vue

Vue基础知识

v-bind:动态绑定属性值

Vue 修改，标签内也修改

在methods 中可以定义很多函数
在 data 中可以定义很多变量

v-if / v-show：对符合条件的元素进行展示

v-for:把数据遍历出现在网页中

案例

<!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="./Vuejs/vue.js"></script>

</head>

<body>

    <table border="1" cellspacing="0" width="60%" id="app">

<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-if="user.gender == 0">女</span>

    </td>

    <td>{{user.score}}</td>

    <td>

        <span v-if="user.score >= 85">优秀</span>

        <span v-else-if="user.score >= 60">及格</span>

        <span style="color : red;" v-else>不及格</span>

    </td>

</tr>

    </table>

</body>

</html>

  
  

<script>

new Vue({

    el:"#app",

    data:{

        users:[{

            name:"Tom",

            age:20,

            gender:1,

            score:78

        },{

            name:"Rose",

            age:18,

            gender:0,

            score:86

        },{

            name:"Jerry",

            age:26,

            gender:1,

            score:90

        },

        {

            name:"Tony",

            age:30,

            gender:1,

            score:52

        }

    ]

    },

    model:{

  

    }

})

</script>

Vue生命周期

Ajax

Zane:)

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识

v-bind:动态绑定属性值Vue 修改，标签内也修改在methods 中可以定义很多函数在 data 中可以定义很多变量v-if / v-show：对符合条件的元素进行展示v-for:把数据遍历出现在网页中。
复制链接

扫一扫