Vue----Vue本地应用(结尾篇)_vue语句结尾-CSDN博客

本文链接：https://blog.csdn.net/weixin_54217216/article/details/123883344

文章目录

前言
一、列表循环，表单元素绑定
总结

前言

本篇将本地应用最后一部分写出来，以便大家学习。

一、列表循环，表单元素绑定

1.v-for

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

❤注意:vue是基于数据开发，数据更新后会同步更新到页面，这是与dom有很大的区别

代码实例

<!-- v-for="dict in List"
              :key="dict.id"//唯一值
              :label="dict.name"//显示的值
              :value="dict.id"//传给后台的值
-->
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
        <li v-for="(it,index) in arr">
            {{index+1}} 李奕赫{{it}}
        </li>
    </ul>
    <h2 v-for="it in beer" v-bind:title="it.name">
        {{it.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:["帅","很帅","超级帅","帅到爆炸"],
            beer:[{name:"雪花"},{name:"大乌苏"}]
        },
        methods:{
            add:function (){
                this.beer.push({name:"1664"})
            },
            remove:function (){
                this.beer.shift();
            }
        }
    })
</script>

展示结果：
1、首先可以看出v-for “语法是（item,index）in 数据”，index是索引会自动增加
2、it是我们自己设置的变量，可以更换
3、点击按钮增加和减少arr数组中的元素，因为vue是实时更新数据，只要数据发生改变，更新页面后，页面也会随之发生改变！
在这里插入图片描述

2.v-on补充

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

代码实例

<div id="app">
    <input type="button" value="点击" @click="It(666,'对对对')">
    <input type="text" @keyup.enter="sayHi">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            It:function (p1,p2){
                console.log("李奕赫帅！");
                console.log(p1);
                console.log(p2);
            },
            sayHi:function (){
                alert("吃了吗您");
            }
        }
    })
</script>

效果展示
1、@keyup.enter代表键盘按下回车后触发事件。
2、@keyup.enter就是一个事件修饰符,我们平常不可能记住所有的东西，根本不可能，所以这里给大家提供一个网站供大家搜索。

https://cn.vuejs.org/v2/api/#v-on 事件修饰符
在这里插入图片描述

3.v-model

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

需要注意：是双向绑定

代码实例

<div id="app">
    <input type="button" value="修改message" @click="setMessage">
    <input type="text" v-model="message" @keyup.enter="getMessage">
    <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:{
            getMessage:function (){
                alert(this.message);
            },
            setMessage:function (){
                this.message="李奕赫超级帅!!!";
            }
        }
    })
</script>