Vue基础（4）（v-for、v-on命令补充、v-model命令、记事本实例）

最新推荐文章于 2024-07-25 09:51:39 发布

MIMO. mimo

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量68

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/mimo_mimo/article/details/129529801

版权

v-for命令

根据数据生成列表结构

①数组

有四个元素的数组，测试item内容直接被输出到界面上

<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">
                num:{{item}}
            </li>
        </ul>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["11","22","33","44"],
            },
        })

    </script>

在这里插入图片描述
测试index被显示到界面上

 <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}、num:{{item}}
            </li>
        </ul>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["11","22","33","44"],
            },
        })

    </script>

在这里插入图片描述 ②对象数组

点击按钮增删数据，

<body>
    <div id="app">
        <button @click="add">add</button>
        <button @click="remove">remove</button>
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}、num:{{item}}
            </li>
        </ul>
        <h2 v-for="item in vagetables" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["11","22","33","44"],
                vagetables:[
                    {name:'egg'},
                    {name:'egg2'}
                ]
            },

            methods:{
                //增加数据
                add:function(){
                    this.vagetables.push({name:'egg3'})
                },
                //减少数据
                remove:function(){
                    this.vagetables.pop();//从后减少
                    //this.vagetables.shift();//从前减少
                }
            }
        })

    </script>

数组常与v-for结合使用，
语法：（item,index）in 数据
数据对应为data中对应的数据
数组长度的更新会同步到页面上

v-on命令补充

自定义参数及事件修饰符的使用

①自定义参数：在触发事件时可以传入自定义的值

 <div id="app">
        <button @click="doit(p1,p2)">add</button>
    </div>

在这里插入图片描述

例如点击按钮返回数字

<div id="app">
        <button @click="doit(66)">add</button>
</div>

doit:function(p1){
                    console.log(p1);
    },

在这里插入图片描述

②事件修饰符：

例如点击回车键触发事件：

<div id="app">
        <input type="text" @keyup.enter="act">
</div>

v-model命令

获取和设置表单元素的值（双向数据绑定）

更改两边数据的任何一边都会同步更新对方的值

 <div id="app">
        <input type="text" v-model="message" @keyup.enter="getm">
        <!-- 在页面完成更改后不显示到代码中
        我们将massege写到下边观察数据是否变化 -->
        <h2>{{message}}</h2>
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:'同步更改',
            },

            methods:{
                getm:function(){
                    alert('niuniuniu');
                },
            }
        })

    </script>

记事本实例

及时删除统计作用的网页本记事本
新增
删除
统计
清空
隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getm">
        <ul>
            <li v-for="(item,index) in things">
                <span>{{index+1}}.</span>
                <span>{{item}}</span>
                <button @click="sub(index)">x</button>
            </li>
        </ul>
        <!-- //统计数组的长度 -->
        <div>{{things.length}} messages</div>
        <!-- 设置点击事件和当内容为0时为隐藏按钮 -->
        <button @click="delay" v-show="things.length>0">delay</button>
        <button @click="clear" v-show="things.length>0">clear</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:'请输入',
                things:['eat','drink'],

            },

            methods:{
                //将用户输入的字符串压入到列表中
                getm:function(){
                    this.things.push(this.message)
                },
                //将最后一条信息去掉
                delay:function(){
                    this.things.pop()
                },
                //将某一行数据删除,需要获取下标,从index脚标的位置开始删除一个元素
                sub:function(index){
                    this.things.splice(index,1)
                },
                //清除所有元素
                clear:function(){
                    this.things.splice(0,this.things.length)
                },
            }
        })

    </script>
</body>
</html>