为了账号安全,请及时绑定邮箱和手机立即绑定

v-for v-model v-on学习

标签:
Vue.js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/Vue2.5.16.js"></script>
</head>
<body>
<div id="millia">
    <input v-model="int" type="text">
    <button @click="hand">提交</button>
    <ul>
        <li v-for="item in lists">{{item}}</li>
    </ul>
</div>
<script>
var vm = new Vue ({
    el: "#millia",
  data: {
        lists: [],
        int:"",
    },
    methods: {
        hand: function(){
            this.lists.push(this.int);
            this.int = "";
            }
     }
});
</script>
</body>
</html>


涉及知识点

JavaScript push() 方法

定义和用法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

语法

arrayObject.push(newelement1,newelement2,....,newelementX)
参数描述
newelement1必需。要添加到数组的第一个元素。
newelement2可选。要添加到数组的第二个元素。
newelementX可选。可添加多个元素。

返回值

把指定的值添加到数组后的新长度。

说明

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。


关于this的使用

this.数据名  指当前实例中data方法中的数据对应名字,注意:不需要像jquery那样前面加$例如:

this.lists.push(this.int);
this.int = "";



点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
4
获赞与收藏
18

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消