Vue学习04——v-for、v-on、v-model

最新推荐文章于 2022-11-11 16:45:06 发布

Duing_

最新推荐文章于 2022-11-11 16:45:06 发布

阅读量236

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/J_Du_pro/article/details/108463128

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

v-for指令

v-for指令的作用是：根据数据生成列表结构
数组经常和 v-for结合使用
语法是 (item,index) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="hero in arr">
                {{hero}}
            </li>
        </ul>
        <ul>
            <li v-for="(hero,index) in arr">
                {{index+1}}-->{{hero}}
            </li>
        </ul>
        <h2 v-for="sport in sports">
            {{sport.name}}
        </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                arr:[
                    "李白",
                    "韩信",
                    "吕布",
                    "项羽"
                ],
                sports:[
                    {name:"足球"},
                    {name:"篮球"},
                    {name:"网球"}
                ]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义的参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(p1,p2){
                    alert(p1+p2)
                },
                sayHi:function(){
                    alert("你好！")
                }
            }
        })
    </script>
</body>
</html>

点击按钮：
在这里插入图片描述
输入结束按回车键：

v-model指令

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素的值相关联
绑定的数据与表单元素的值双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
        <input type="button" value="点击"  @click="setM">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Vue程序员"
            },
            methods:{
                setM:function(){
                    this.message = "前端开发"
                }
            }
        })
    </script>
</body>
</html>

初始：
在这里插入图片描述
输入时：

点击后：

Duing_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习04——v-for、v-on、v-model

v-for指令v-for指令的作用是：根据数据生成列表结构数组经常和 v-for结合使用语法是 (item,index) in 数据item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
复制链接

扫一扫