vue把输入框的内容添加到页面的实例讲解-偶像资源网

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把输入框的内容添加到页面的实例内容，感谢大家的学习和对的支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论