关于Vue的学习—v-for、v-on、v-model

衍生星球

已于 2023-07-18 16:01:10 修改

阅读量190

点赞数

分类专栏：《Vue学习笔记》文章标签： vue.js 学习 javascript

于 2022-06-15 16:20:37 首次发布

本文链接：https://blog.csdn.net/weixin_45627039/article/details/125289966

版权

《Vue学习笔记》专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.v-for指令

v-for：根据数据生产列表结构。
基础代码：

   <div id = "app">
    <ul>
		<li v-for= "item in arr":title="item"  >
			{{index}}{{item}}
		</li>
		<li v-for="(item,index) in objArr">
			{{item.name}}
		</li>
	</ul>
    </div>

   var app = new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
				objArr[
					{name :"jack"},
					{name :"rose"}
				]
            }
        })

整体案例代码如下：

<!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>v-for指令</title>
</head>

<body>
    <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>
        <h2  v-for="item in vagetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
	</ul>
    </div>
	
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                vagetables:[
                    {name : "铅笔"},
                    {name : "钢笔"}
                ]
            },
            methods:{
                add : function(){
                    this.vagetables.push({name:"毛笔"});
                },
                remove:function(){
                    this.vagetables.shift();
                }
            }
        })
    </script>
	
</body>
</html>

运行结果：
在这里插入图片描述

总结：
①v-for指令的作用是:根据数据生产列表结构。
②数组经常和v-for结合使用。
③语法是（item，index）in 数据。
④item和index可以结合其他指令一起使用。
⑤数组长度的更新会同步到页面上，是响应式的。

2.v-on指令

v-on：自定义参数，事件修饰符等。
基础代码：

  <div id = "app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>

var app = new Vue({
            el:"#app",
            methods:{
                doIt : function(p1,p2){
                   console.log("做IT");
                   console.log(p1);
                   console.log(p2);
                },
               sayHi : function(){
                alert("ok");
               }
            }
        })

整体案例代码如下：

<!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>v-on指令</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){
                   console.log("做IT");
                   console.log(p1);
                   console.log(p2);
                },
               sayHi : function(){
                alert("ok");
               }
            }
        })
    </script>
	
</body>
</html>

运行结果：
在这里插入图片描述

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

3.v-model指令

v-model：获取和设置表单元素的值（数据双向绑定）。
基础代码：

<div id = "app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>

 var app = new Vue({
            el:"#app",
            data:{
               message:"慕辰枫"
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message="zhang";
                }
            },
        })

整体案例代码如下：


<!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>v-model指令</title>
</head>

<body>
    <div id = "app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
	
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               message:"慕辰枫"
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message="zhang";
                }
            },
        })
    </script>
	
</body>
</html>