vue.js 简单入门
转载自：http://blog.csdn.net/violetjack0808/article/details/51451672
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8">
<title>index</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>学生信息登记</h2>
<br>
<div>
<label>姓名：</label>
<input type="text" placeholder="请输入姓名" v-model="name">
</div>
<div>
<label>性别：</label>
<input id="sex01" type="radio" value="1" v-model="sex">
<label for="sex01">男</label>
<input id="sex02" type="radio" value="2" v-model="sex">
<label for="sex02">女</label>
</div>
<div>
<label>年龄：</label>
<select v-model="age">
<option selected>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
</select>
</div>
<div>
<label>党员：</label>
<input type="checkbox" v-model="member">
</div>
<br>
<button id="btnCommit" v-on:click="commit">提交</button>
<button id="btnReset" v-on:click="reset">重置</button>
<br>
<br>
<label>{{ result }}</label>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '',
sex: '',
age: '',
member: '',
result: ''
},
ready: function () {
alert("加载完成");
},
methods: {
commit: function () {
var name = this.name;
var sex = '';
if (this.sex == 1){
sex = '男';
}else if (this.sex == 2){
sex = '女';
}
var age = this.age;
var member = '';
if (this.member){
member = '党员';
} else {
member = '非党员';
}
var result = name + ' ' + sex + ' ' + age + ' ' + member;
this.result = result;
},
reset: function () {
this.result = '';
}
},
watch: {
'sex': function (val, oldVal) {
console.log('oldVal = ' + oldVal + ' val = ' + val);
}
}
});
</script>
</body>
</html>
vue.js 简单入门的更多相关文章
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- Vue.js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue的理解：Vue.js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
随机推荐
- 05.K米评测
体验产品:K米Android版本 软件版本:4.3.0 设备型号:魅蓝note2 操作系统: Android5.1 体验时间:2016.10.15-2016.10.15 体验人:黄瑞钰(0314025 ...
- spring-data-jpa Repository的基本知识
1.项目中的Repository对象的使用 2.Repository 引入的两种方式 继承和使用注解 3.Repository接口的定义 Repository 接口是 spring Data 的一个核 ...
- java编解码技术,netty nio
对于java提供的对象输入输出流ObjectInputStream与ObjectOutputStream,可以直接把java对象作为可存储 的字节数组写入文件,也可以传输到网络上去.对与java开放人 ...
- linux系统判断是否重启、关机、查询登录诊断分析简介
Last reboot这个命令是查看每次系统重启的信息 [root@dg01 log]# last rebootreboot system boot 2.6.32-300.10.1. Thu May ...
- win7安装virtualbox
1.下载软件 VirtualBox-4.3.24-98716-Win.1425444683.exe 2.修改安装路径 3.确定选择下一步 4.下一步 5.yes 6.安装 7.安装完成 到此win7 ...
- Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】
<html> <head> <script type="text/JavaScript" src="jQuery-1.5.1.min.j ...
- HTML学习笔记——box
1> HTML写法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 深刻认识一下session
session是什么: session即会话,是一种持续性,双向的连接. session和cookie在本质上没什么区别,都是针对http协议的局限性提出的一种保持客户端和服务端会话状态的机制. se ...
- php字符串常用算法--字符串加密解密
/** * 加密.解密字符串 * * @global string $db_hash * @global array $pwServer * @param $string 待处理字符串 * @para ...
- Lua 之数据结构
Lua 之数据结构 数组 通过整数下标访问的table中的元素,即是数组,下标默认从1开始. 一个创建二维数组的例子: mt = {} , do mt[i] = {} , do mt[i][j] = ...