vue4——把输入框的内容添加到页面（简单留言板）
文章地址：https://www.cnblogs.com/sandraryan/
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>
在输入框输入内容点击按钮，会把内容渲染到页面。同时会增加数组的元素
vue4——把输入框的内容添加到页面（简单留言板）的更多相关文章
- [课程设计]Scrum 3.6 多鱼点餐系统开发进度（用户测试反馈页面构思&留言板设计）
Scrum 3.6 多鱼点餐系统开发进度(用户测试反馈页面构思&留言板设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
- [课程设计]Scrum 1.7 多鱼点餐系统开发进度（点餐菜式内容添加及美化）
[课程设计]Scrum 1.7 多鱼点餐系统开发进度(点餐菜式内容添加及美化) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题 ...
- ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能
参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...
- ecshop 添加后台页面以及设置权限
转自 http://blog.csdn.net/tgh1981/article/details/10394059 ecshop 添加新页面 给ecshop后台增加管理功能页面 比如我们增加一个统计报表 ...
- Ruby Rails学习中：有点内容的静态页面
续上篇: 一. 有点内容的静态页面 rails new 命令创建了一个布局文件, 不过现在最好不用.我们重命名这个文件: $ mv app/views/layouts/application.html ...
- 3、IOS开发--iPad之仿制QQ空间 （为HomeViewController添加交互逻辑 并 为导航条内容添加UISegmentedControl）
1. 为bottomMenu添加点击效果 思路描述: 需求: 点击BottomButton的三个item,然后对应响应的是HomeViewController弹出对应的业务 ...
- 判断数据库内容，在页面显示自定义数据case when
判断数据库内容,在页面显示自定义数据 case when...then ...else...end 比如:数据库内容是这样: 通过sql语句判断,数据库的name字段,内容是月桂的,显示嫦娥,其他的显 ...
- vs2010根据字符串内容添加断点
在vs中我们可以直接用表达式.数值型比较直接用操作符即可. 如i==2,i<2; 但是字符型比较呢? 加入我们有一个名为string的变量,定义如下: char *string="Tw ...
随机推荐
- Leetcode96.Unique Binary Search Trees不同的二叉搜索树
给定一个整数 n,求以 1 ... n 为节点组成的二叉搜索树有多少种? 示例: 输入: 3 输出: 5 解释: 给定 n = 3, 一共有 5 种不同结构的二叉搜索树: 假设n个节点存在二叉排序树的 ...
- PHP 学习1.1
1 链接mysql 数据简单测试 <html><head> <title></title> <meta http-equiv="Co ...
- selenium(6)：通过多种定位方式还是不能成功定位的原因
场景:在成功修改密码后,会弹出一个修改成功的提示.通过id.xpath.class.css方式定位后,执行到这一步时候,就会出现错误. 原因:仔细检查了下代码,发现在提交修改的操作到修改成功的提示之间 ...
- 常用命令4-文件搜索命令 2- whereis
whereis比较局限,只能查看系统命令.
- Vue项目根据不同运行环境打包项目
前提 项目是直接通过 vue-cli脚手架 生成的: 假设在项目开发中,分为三个环境 -- · 测试环境· 预生产环境· 生产环境 每个环境的接口地址都是不同的,而 vue-cli 给出的环境只有 d ...
- linux 添加文字、图形、线条、箭头的 截图
1.deepin-screenshot 截图 软件包里搜索deepin-screenshot 支持添加文字.图形.线条.箭头的功能 2.字体发虚 Linux mint 开始菜单等字体不清晰 在软件管理 ...
- Python2 生成器 简介
1. A generator: provide a kind of function that can return an intermediate result ("the next va ...
- python中defaultdict类
回宿舍前翻翻Codeforces的时候发现了一个有趣的代码．．其实是我没这么用过 :D 这是一份417B的代码 import sys from collections import defaultdi ...
- 开通了第一个博客，mark一下！
今日上网查询了不同的博客,包括csdn.掘金等,最终决定选择博客园.打算待前端学完后,自己建立一个博客,这段时间内先用博客园记录学习过程.经常总结.更新,相信坚持学习一定可以找到好工作!
- s3c6410时钟初始化
今天自己写bootloader做时钟初始化时遇到的问题,特记录下来.为了方便理解,我大部分都有截图, 在此我先说明下,图均来自数据手冊.也希望看了本篇文章的同志多多參看数据手冊才干理解的更加透 ...