vue2.3-列表循环、表单元素绑定

最新推荐文章于 2023-03-01 17:35:46 发布

小小蚂蚁仔.

最新推荐文章于 2023-03-01 17:35:46 发布

阅读量499

点赞数

分类专栏：前端的一点点文章标签：前端

本文链接：https://blog.csdn.net/weixin_44542265/article/details/124561843

版权

前端的一点点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

1、v.for-根据数据生成列表结构

例1:循环访问数据

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
   <div id="app">
<!--       html代码循环访问数组数据-->
       <ul>
           <li v-for="(it,index) in arr">
               {{ index+1 }} 测试测试：{{it}}
           </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:['重庆','上海','广州','长沙'],
        },
    })
</script>
</body>
</html>

运行结果：

例2-响应式添加移除数据

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
   <div id="app">
<!--       html代码-定义2个按钮进行添加、移除数据操作-->
       <input type="button" value="添加数据" @click="add">
       <input type="button" value="移除数据" @click="remove">
<!--       html代码-展示数据-->
       <h2 v-for="item in vegetables" 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:{
            // 定义对象数据
            vegetables:[
                {name:"测试1"},
                {name:"测试2"}     ]
        },
        //定义添加、移除数据方法
        methods:{
            add:function (){this.vegetables.push({name:"我是添加数据"}); },
            remove:function (){this.vegetables.shift();}
        },
    })
</script>
</body>
</html>

总结：

v-for指令的作用是：根据数据生成列表结构

数组经常和v-for结合使用

语法是（item，index） in 数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上，是响应式的

2、v.on补充-传递自定义参数，事件修饰符

例-点击响应

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
   <div id="app">
       <input type="button" value="点击" @click="doIt('测试1','测试2')">
   </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            doIt:function (p1,p2){
                console.log("测试");
                console.log(p1,p2);  }
        },
    })
</script>
</body>
</html>

运行结果：

例2- 输入后回车键时响应

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
   <div id="app">
       <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:{
            sayhi:function (){
                alert('测试测试') }
        },
    })
</script>
</body>
</html>

运行结果：

总结：

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

事件修饰符有多种

3、v.model-获取和设置表单元素的值（双向数据绑定）

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v.model</title>
</head>
<body>
   <div id="app">
<!--       改变表单元素的值后message同步更新-->
       <input type="button" value="修改message" @click="setM">
<!--       改变表message值后表单元素同步更新-->
       <input type="text" v-model="message" @keyup.enter="getM">
       <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:{
            //获取message
            getM:function (){alert(this.message); },
            //更改message
            setM:function (){this.message='测试setm';}
        },
    })
</script>
</body>
</html>

运行结果：

总结：

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据、表单元素的值是双向绑定，无论改变谁另一个都会被改变

小小蚂蚁仔.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.3-列表循环、表单元素绑定

一、列表循环、表单元素绑定1、v.for-根据数据生成列表结构例1:循环访问数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-for</title></head><body> <div id="app"><!--
复制链接

扫一扫

专栏目录