Vue学习04——本地应用

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>

初始:
在这里插入图片描述
输入时:
在这里插入图片描述
点击后:
在这里插入图片描述

分类: Vue

0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。