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 ...
随机推荐
- GitHub - firebase/php-jwt: PEAR package for JWT
PHP-JWT A simple library to encode and decode JSON Web Tokens (JWT) in PHP, conforming to RFC 75 ...
- Liferay 7：portlet name
总结自: https://web.liferay.com/zh/web/user.26526/blog/-/blogs/proper-portlet-name-for-your-portlet-com ...
- Faster RCNN算法demo代码解析
一. Faster-RCNN代码解释 先看看代码结构: Data: This directory holds (after you download them): Caffe models pre-t ...
- LINUX下C++编程如何获得某进程的ID
#include <stdio.h> #include <stdlib.h> #include <unistd.h> using namespace std; pi ...
- golang 命令行参数
package main import ( "fmt" "flag" ) func main() { //定义几个变量,用于接收命令行的参数值 var user ...
- 几种支持REST的Java框架
目前宣称支持REST的Java框架包括以下这些: Restlet(http://www.restlet.org/) Cetia4(https://cetia4.dev.java.net/) Apach ...
- Codeforces Round #275 (Div. 2) A. Counterexample【数论/最大公约数】
A. Counterexample time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- vue-cli3 搭建的前端项目基础模板
基于 vue-cli3 搭建的前端模板,fork 或 clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork 特性 CSS 预编译语言:less Ajax: ax ...
- SDUT-3402_数据结构实验之排序五：归并求逆序数
数据结构实验之排序五:归并求逆序数 Time Limit: 50 ms Memory Limit: 65536 KiB Problem Description 对于数列a1,a2,a3-中的任意两个数 ...
- R语言-组间差异的非参数检验
R语言-组间差异的非参数检验 7.5 组间差异的非参数检验 如果数据无法满足t检验或ANOVA的参数假设,可以转而使用非参数方法.举例来说,若结果变量在本质上就严重偏倚或呈现有序关系,那么你可能会希望 ...