两个Vue Demo
1 实现 person list
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/vueDemo413.css" />
</head> <body>
<div id="app"> <fieldset>
<legend>
Person List
</legend>
<div class="form-group">
<label>Name:</label>
<input type="text" v-model="newPerson.name"/>
</div>
<div class="form-group">
<label>Age:</label>
<input type="text" v-model="newPerson.age"/>
</div>
<div class="form-group">
<label>Sex:</label>
<select v-model="newPerson.sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label></label>
<button @click="createPerson">Create</button>
</div>
</fieldset>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<!-- <script src="js\node_modules\vue\dist\vue.js"></script> -->
<script src="js/vue.js"></script> <script>
var vm = new Vue({
el: '#app',
data: {
newPerson: {
name: '',
age: 0,
sex: 'Male'
},
people: [{
name: 'Richard',
age: 30,
sex: 'Male'
}, {
name: 'Roy',
age: 26,
sex: 'Male'
}, {
name: 'Sansa',
age: 22,
sex: 'Female'
}, {
name: 'Micheal',
age: 36,
sex: 'Male'
}]
},
methods:{
createPerson: function(){
this.people.push(this.newPerson);
// 添加完newPerson对象后，重置newPerson对象
this.newPerson = {name: '', age: 0, sex: 'Male'}
},
deletePerson: function(index){
// 删一个数组元素
this.people.splice(index,1);
}
}
})
</script> </html>
2 搜索person
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/myTest417.css" />
</head> <body>
<div id="app">
<div id="searchBar">
Search <input type="text" v-model="searchQuery" />
</div>
<simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">//:v-bind,@v-on
</simple-grid>
</div> <template id="grid-template">
<table>
<thead>
<tr>
<th v-for="col in columns">
{{ col | capitalize}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in data | filterBy filterKey">
<td v-for="col in columns">
{{entry[col]}}
</td>
</tr>
</tbody>
</table>
</template> </body>
<script src="js/vue.js"></script> <script>
Vue.component('simple-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
}
}) var demo = new Vue({
el: '#app',
data: {
searchQuery: '',
gridColumns: ['name', 'age', 'sex'],
gridData: [{
name: 'Richard',
age: 30,
sex: 'Male'
}, {
name: 'Roy',
age: 26,
sex: 'Male'
}, {
name: 'Sansa',
age: 22,
sex: 'Female'
}, {
name: 'Micheal',
age: 36,
sex: 'Male'
}]
}
})
</script> </html>
CSS:
1:
* {
margin:;
padding:;
box-sizing: border-box
}
html {
font-size: 12px;
font-family: Ubuntu, simHei, sans-serif;
font-weight: 400
}
body {
font-size: 1rem
}
table,
td,
th {
border-collapse: collapse;
border-spacing: 0
}
table {
width: 100%
}
td,
th {
border: 1px solid #bcbcbc;
padding: 5px 10px
}
th {
background: lightcoral;
font-size: 1.2rem;
font-weight:;
color: #fff;
cursor: pointer
}
tr:nth-of-type(odd) {
background: #fff
}
tr:nth-of-type(even) {
background: #eee
}
fieldset {
border: 1px solid #BCBCBC;
padding: 15px;
}
input {
outline: none
}
input[type=text] {
border: 1px solid #ccc;
padding: .5rem .3rem;
}
input[type=text]:focus {
border-color: #42b983;
}
button {
outline: none;
padding: 5px 8px;
color: #fff;
border: 1px solid #BCBCBC;
border-radius: 3px;
background-color: lightcoral;
cursor: pointer;
}
button:hover{
opacity: 0.8;
}
#app {
margin: 0 auto;
max-width: 640px
}
.form-group {
margin: 10px;
}
.form-group > label {
display: inline-block;
width: 10rem;
text-align: right;
}
.form-group > input,
.form-group > select {
display: inline-block;
height: 2.5rem;
line-height: 2.5rem;
}
.text-center{
text-align: center;
}
.pagination {
display: inline-block;
padding-left:;
margin: 21px 0;
border-radius: 3px;
}
.pagination > li {
display: inline;
}
.pagination > li > a {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.5;
text-decoration: none;
color: #009a61;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
list-style: none;
}
.pagination > li > a:hover {
background-color: #eee;
}
.pagination .active {
color: #fff;
background-color: #009a61;
border-left: none;
border-right: none;
}
.pagination .active:hover {
background: #009a61;
cursor: default;
}
.pagination > li:first-child > a .p {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.pagination > li:last-child > a {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
2:
* {
margin:;
padding:;
box-sizing: border-box
}
html {
font-size: 12px;
font-family: Ubuntu, simHei, sans-serif;
font-weight: 400
}
body {
font-size: 1rem
}
table,
td,
th {
border-collapse: collapse;
border-spacing: 0
}
table {
width: 100%;
margin: 20px;
}
td,
th {
border: 1px solid #bcbcbc;
padding: 5px 10px
}
th {
background: lightcoral;
font-size: 1.2rem;
font-weight:;
color: #fff;
cursor: pointer
}
tr:nth-of-type(odd) {
background: #fff
}
tr:nth-of-type(even) {
background: #eee
}
fieldset {
border: 1px solid #BCBCBC;
padding: 15px;
}
input {
outline: none
}
input[type=text] {
border: 1px solid #ccc;
padding: .5rem .3rem;
}
input[type=text]:focus {
border-color: #42b983;
}
button {
outline: none;
padding: 5px 8px;
color: #fff;
border: 1px solid #BCBCBC;
border-radius: 3px;
background-color: #009A61;
cursor: pointer;
}
button:hover{
opacity: 0.8;
}
#app {
margin: 0 auto;
max-width: 480px;
}
#searchBar{
margin: 10px;
padding-left: 20px;
}
#searchBar input[type=text]{
width: 80%;
}
.arrow {
display: inline-block;
vertical-align: middle;
width:;
height:;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
1:
2:
两个Vue Demo的更多相关文章
- vue demo todo-list
html <input type='text' v-model="todoItem" v-on:keyup.enter='addItem'> <ul> &l ...
- 个人推荐的两款vue导出EXCEL插件
个人认为前端VUE项目中导出EXCEL比较好的两种方法,均不是我个人原创,我只是收录简单说明,原创地址在下面. 下面推荐两种方法,个人推荐第一种,第二种不做详细讲解,因为作者已经写过博客了,你们可以点 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- 一文解析Pinia和Vuex，带你全面理解这两个Vue状态管理模式
Pinia和Vuex一样都是是vue的全局状态管理器.其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia. 本文将通过Vue3的形式对两者的不同实现方式进行 ...
- Framework7+vue demo
最近看了下f7+vue做了几个测试页面,商品图片来自淘宝,代码等有时间了再传,
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- vue环境的搭建与第一个demo
参考两个博客 1 2 git.npm和淘宝镜像的安装过程过程省略了,直接开始webpack + vue-cli + 创建demo 首先,在磁盘创建一个文件夹,命名为vue-projects,里面再建一 ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
随机推荐
- Ubuntu解决winscp连接不上虚拟机问题
前几天在配置虚拟机的时候,尝试用winscp连接Ubuntu,结果连接被拒绝.原因:Ubuntu的ssh服务需要自己安装和启动,在没启动之前,是无法连接上去的 解决方案: 我们可以输入:ssh loc ...
- SpringBoot学习1：创建第一个SpringBoot项目
一.新建项目 二.打开项目的pom文件,在里面添加maven依赖 <!--springboot项目依赖的父项目--> <parent> <groupId>org.s ...
- ES6 Proxy拦截器详解
Proxy 拦截器 如有错误,麻烦指正,共同学习 Proxy的原意是"拦截",可以理解为对目标对象的访问和操作之前进行一次拦截.提供了这种机制,所以可以对目标对象进行修改和过滤的操 ...
- python 实现剪刀石头布（三局两胜）
# -*- coding:utf-8 -*- import random # best of three def finger_guess(): rule = {1:'rock', 2:'paper' ...
- 四、Shell 数组
Shell 数组 数组中可以存放多个值.Bash Shell 只支持一维数组(不支持多维数组),初始化时不需要定义数组大小(与 PHP 类似). 与大部分编程语言类似,数组元素的下标由0开始. She ...
- 三、MySQL PHP 语法
MySQL PHP 语法 MySQL 可应用于多种语言,包括 PERL, C, C++, JAVA 和 PHP. 在这些语言中,Mysql在PHP的web开发中是应用最广泛. 在本教程中我们大部分实例 ...
- Foxmail登录不了网易企业邮箱解决办法
关于Foxmail登录不了网易企业邮箱问题 解决办法是:在设置账号的时候手动设置pop服务器和smtp服务器. 新建账号的图: 点击“手动设置”出现如下界面: 设置完成后问题解决.下面的两个是正确的, ...
- DeepFaceLab报错，OOM如何解决？
DeepFaceLab出错,虽然错误提示好几个屏幕,但是无非两种情况,一种是驱动没装好,一种是显存配置不够.上一篇文章说了驱动的问题,这一篇就说说配置不够的问题. 这个问题的表现形式,往往是各种OOM ...
- linux的发展过程
1. 操作系统 人与计算机硬件直接的中介 2. Linux系统组成 3. Linux的发展过程 蛋-人-人-人 unix于诞生贝尔实验室 人-谭教授 谭宁邦 minix mini unix. 主要用于 ...
- keil swd设置下载stm32f103c8t6.
1.debug选项,选择jlink,2.utilities选择jlink3.加载flash算法.4.选择swd模式,其他基本上默认,这样就可以下载了对rom和ram设置需要说明一下:1,IROM1,前 ...