vue.js（二）
一个实例：
html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Vuejs</title>
<style>
.finished {
text-decoration: underline;
}
</style>
</head>
<body> <div id="demo">
<h1 v-text="title"></h1>
<!-- v-model随表单控件的不同而不同 -->
<input type="text" v-model="newItem" @keyup.enter="addNew"/>
<ul>
<li v-for="item in items" :class="{finished: item.isFinished}"
@click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div> <script src="jquery-3.1.0.min.js"></script>
<script src="vue.js"></script>
<script src="demo01.js"></script> </body>
</html>
js:
var demo = new Vue({
el: '#demo',
data: function () {
return {
title: 'this is a todo list',
items: [
/*{
label: 'coding',
isFinished: false
},
{
label: 'walking',
isFinished: true
}*/
],
newItem: '',
liClass: 'thisIsLiClass'
};
},
methods: {
doSomething: function () {
console.log(this.a);
},
toggleFinish: function (item) {
item.isFinished = !item.isFinished; // 布尔值取反
},
addNew: function () {
this.items.push({
label: this.newItem,
isFinished: false
});
this.newItem = '';
}
}
});
用localstorage来存储todolist
html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Vuejs</title>
<style>
.finished {
text-decoration: underline;
}
</style>
</head>
<body> <div id="demo">
<h1 v-text="title"></h1>
<!-- v-model随表单控件的不同而不同 -->
<input type="text" v-model="newItem" @keyup.enter="addNew"/>
<ul>
<li v-for="item in items" :class="{finished: item.isFinished}"
@click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div> <script src="jquery-3.1.0.min.js"></script>
<script src="vue.js"></script>
<script src="demo01.js"></script> </body>
</html>
js:
var demo = new Vue({
el: '#demo',
data: function () {
return {
title: 'this is a todo list',
items: JSON.parse(window.localStorage.getItem('todolist') || '[]'),
newItem: '',
liClass: 'thisIsLiClass'
};
},
methods: {
doSomething: function () {
console.log(this.a);
},
toggleFinish: function (item) {
item.isFinished = !item.isFinished; // 布尔值取反
},
addNew: function () {
this.items.push({
label: this.newItem,
isFinished: false
});
this.newItem = '';
}
},
watch: {
items: {
handler: function (items) {
window.localStorage.setItem('todolist', JSON.stringify(items));
},
deep: true
}
}
});
localStorage.setItem('todotype', '1');
//console.log(localStorage.getItem('todotype'));
查看localStorage：
vue.js（二）的更多相关文章
- 一天带你入门到放弃vue.js(二)
接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...
- vue.js 二维码生成组件
安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...
- vue.js 二 路由懒加载
当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面 才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目 ...
- 一天带你入门到放弃vue.js(三)
自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...
- 一天带你入门到放弃vue.js(一)
写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...
- 前端知识(一)04 Vue.js入门-谷粒学院
目录 一.介绍 1.Vue.js 是什么 2.初识Vue.js 二.基本语法 1.基本数据渲染和指令 2.双向数据绑定 3.事件 4.修饰符 5.条件渲染 6.列表渲染 7.实例生命周期 一.介绍 1 ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue.js+socket.io+express+mongodb打造在线聊天[二]
vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Python学习二十八周（vue.js）
一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...
随机推荐
- Python全栈之路8--迭代器(iter)和生成器(yield)
一.生成器( iter ) 从Python2.2起,生成器提供了一种简洁的方式帮助返回列表元素的函数来完成简单和有效的代码. 它基于yield指令,允许停止函数并立即返回结果.此函数保存其执行上下文, ...
- hdu 3999 The order of a Tree (二叉搜索树)
/****************************************************************** 题目: The order of a Tree(hdu 3999 ...
- 小甲鱼python视频第十讲（课后习题）
1.list1[0]与list1[0:1]的区别 2.分片的步长 3关于列表的copy(注意list2与list3的区别) list1 = [,,,,,,] list2 = list1[:] list ...
- autoresizingMask的用法
UIViewAutoresizingNone = , UIViewAutoresizingFlexibleLeftMargin = << , UIViewAutoresizingFlexi ...
- 数据库的char(n)
Mysql中的char(n)或者varchar(n) 其中的n就是代表列,不代表字节! varchar(n)其中的n最多是65535 , 应该在创建表的同时,指定表的编码方式为latin1,因为lat ...
- getContextPath、getServletPath、getRequestURI的区别
假定你的web application 项目名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下 ...
- python中xrange和range的异同
本文章系转载,原文来源不详. range 函数说明:range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列.range示 ...
- RMQ_ST算法
RMQ (Range Minimum/Maximum Query)算法 1. 概述 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数 ...
- jQuery遮罩层效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Exception in thread "http-apr-8080-exec-2"
设置了catalina.bat.catalina.sh都不起作用MyEclipse中选择菜单Windows---preferences---MyEclipse---Servers---Tomcat-- ...