Vue的运用练习

最新推荐文章于 2024-09-04 15:47:59 发布

Monster X

最新推荐文章于 2024-09-04 15:47:59 发布

阅读量125

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44329441/article/details/101037338

版权

1、完成人员列表的删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        姓名:<input type="text" v-model="username"><br>
        性别:<input type="text" v-model="sex"><br>
        <button v-on:click="add">点我添加</button>
        <button v-on:click="del">点我删除</button>
    </div>

<table>
    <thead>
    <tr>
        <td></td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    </thead>
    <tbody>
    <tr v-for="user in users" :key="user.name" >
        <td><input type="checkbox"></td>
        <td>{{user.name}}</td>
        <td>{{user.sex}}</td>
    </tr>
    </tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            username:'',
            sex:'',
            users:[
                {
                    name:'蓝精灵',
                    sex:'男',
                },
                {
                    name:'古踢乐',
                    sex:'男'
                },
                {
                    name:'nmsl❤',
                    sex:'男'
                }
            ]
        },
        methods:{
            add(){
                user={
                    name:this.username,
                    sex:this.sex,
                }
                this.users.push(user);
            },
            del(){
                user={
                    name:this.username,
                    sex:this.sex,
                }
                this.users.splice(this.user,1)
            }
        }
    })
</script>
</html>

2、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码

1遍历数字:v-for=“i in 10"2迭代data中的普通对象:v-for=”(val, key, i) in cat",3迭代data中的数组v-for="(item, i) in list"

3、文字叙述v-model和v-bind的差别

v-bind是单向绑定，v-model是一双向绑定

Monster X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的运用练习

1、完成人员列表的删除功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <di...
复制链接

扫一扫