vue把输入框的内容添加到页面的实例讲解

时间：2021-05-26

vue最最最简单的demo（记得引入）

实例化一个vue，绑定#app的元素，要渲染的数组arr作为data。

把arr的item渲染到页面，输入内容点击按钮把用户输入的内容添加到页面以及数组

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <p>click to add input's content</p> <input id="inp" type="text"> <button id="btn">add</button> <div v-for = 'item in arr'>{{item}}</div></div><script src="https://cdn.bootcss.com/vue/2.0.1/vue.js"></script><script> const test = new Vue({ el :'#app', data : { arr : ['first','second','third','forth'] } }); console.log(test.arr); btn.onclick = function(){ test.arr.push(inp.value); };</script></body></html>

在输入框输入内容点击按钮，会把内容渲染到页面。同时会增加数组的元素

以上就是本次介绍的关于vue把输入框的内容添加到页面的实例内容，感谢大家的学习和对的支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章