》》vue
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
.active {
color: red;
} .text-success {
color: #009966;
font-size: 20px;
} .fontWeight {
font-weight: bold;
}
</style>
</head> <body>
<div id="list">
<ul>
<div v-bind:class="[fontWeight,textSuccess]">欢迎品尝</div>
<input type="text" v-model="moonstuffing" maxlength="5" placeholder="请输入您喜欢的月饼馅" />
<div v-bind:class="classObject">中秋节月饼馅</div>
<li v-for="item in mooncake">{{item}}</li> </ul>
<div v-bind:style="obj">花好月圆夜</div>
<my-component v-bind:class="textSuccess" v-bind:message="txt"></my-component>
<!--自定义UI组件--> <user-input v-if="ok" :message="user.loginType" :changevalue="changevaluefn" :values="username" :types="user.textType" :placeholdertext="user.placeText" key="username"></user-input>
<user-input v-else :message="user.loginType" :changevalue="changevaluefn" :values="useremail" :types="user.textType" :placeholdertext="user.placeText" key="useremail"></user-input> <button @click="change">点击切换</button> <hr /> <!--<template> 元素当做包装元素-->
<template v-if="qiehuan">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template> <template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template> <button @click="tab">点击切换（使用包装元素）</button> <hr /> <div v-show="ok">
哈哈我显示了
</div> <!-- v-for v-if 结合使用-->
<h1> v-for v-if 结合使用</h1>
<ul>
<li v-for = "item in money" v-if="item.price <= 40">{{item.txt}}</li> </ul> </div>
</body>
<script src="js/vue.js"></script> <script type="text/javascript">
Vue.component('user-input', {
template: '<div><label>{{message}}</label><input :value="values" @input="changevalue" @onpropertychange="changevalue" :type="types" :placeholder="placeholdertext"></div>',
props: ["message", "types", "placeholdertext","values","changevalue"], }) Vue.component('my-component', {
template: '<p class="foo bar">{{message}}</p>',
props: ["message"]
}) var moon = new Vue({
el: "#list",
data: {
ok:true,
qiehuan:true,
isActive: true,
isSuccess: true,
moonstuffing: '',
mooncake: ["蛋黄", "五仁", "豆沙", "莲蓉"],
fontWeight: "fontWeight",
textSuccess: "text-success",
txt: "哈哈",
activeColor: "red",
fontSize: 60,
obj: {
color: "red",
fontSize: "60px"
},
user: {
loginType: "username",
textType: "email",
placeText: "请输入用户名"
},
username:'用户名',
useremail:'邮箱',
money:[
{price: 10,txt:"10元"},
{price: 20,txt:"20元"},
{price: 30,txt:"30元"},
{price: 40,txt:"40元"},
{price: 50,txt:"50元"},
{price: 60,txt:"60元"},
{price: 70,txt:"70元"},
{price: 80,txt:"80元"}
] },
methods: { change: function() {//点击按钮切换 if(this.ok) {
this.ok = false;//控制组件显示隐藏 this.user = {
loginType: "email",
textType: "email",
placeText: "请输入邮箱"
} } else { this.ok = true;//控制组件显示隐藏 this.user = {
loginType: "username",
textType: "text",
placeText: "请输入用户名"
} } },
changevaluefn:function(e){//监听值变化
var e = e || window.event;
var target = e.target || e.srcElement; if(this.ok) {
this.username = target.value //接收用户名
} else {
this.useremail = target.value//接收邮箱 }
},
tab:function() {//点击按钮切换 if(this.qiehuan) {
this.qiehuan = false; } else { this.qiehuan = true;//控制组件显示隐藏 } }
},
watch: { //监听数据发送改变
moonstuffing: function(newValue, oldValue) { //监听属性
console.log(oldValue)
if(newValue != '') {
moon.mooncake.push(newValue)
moon.isActive = true;
} else {
moon.isActive = false;
}
}
}, computed: {
classObject: function() {
return {
active: this.isActive,
'text-success': this.isSuccess
}
}
}
})
</script> </html>
》》vue的更多相关文章
- 《《我是一只IT小小鸟》》读后感
接触IT也已经半年了,在这半年我没有充足的时间去了解IT这个行业,在大学生职业规划课程上,老师推荐了<<我是一只IT小小鸟>>这本书,我才发现IT这个行业并不是想象的那么无趣, ...
- 【图文详细教程】maven3安装配置+eclipse离线安装maven3插件《《唯一成功的教程~~~2018-01-09》》
环境搭建前提: 1.电脑上已经安装了1.7以及以上版本的JDK(因为我提供的maven版本是最新的3.3.9的,要求最低JDK1.7) 2.配置好了ecplise并且能正常启动 第一步:下载maven ...
- jsp---》》》新闻发布系统的项目跟踪+++++++文件上传
先来一个分层架构图: WeebRoot目录下的页面: 现在,此项目以实现登录,注销,新闻列表,编辑主题>>>> 先来登录部分的关键代码 index.jsp中的代码 userIn ...
- 读《《图解TCP-IP》》有感
读<<图解TCP/IP>>有感 TCP/IP 近期几天读完<<图解TCP/IP>>,收获蛮多,记得上学时读stevens的<<TCP/IP具 ...
- heavy dark--读《《暗时间》》
本书名为<<暗时间>>,个人觉得是一个非常好的名字:1.迷茫的大学生有多少的业余时间,但又浪费多少的业余时间,浪费的这莫多时间就如同人在黑夜中一样,大脑是在休息的状态.这是第一 ...
- hadoop 》》 django 简单操作hdfs 语句
>> from django.shortcuts import render # Create your views here. from hdfs.client import Clien ...
- 实体类在Windows程序中的高级应用--------------------》》心境是一种境界。
一.事务 我们在大家学到这,或多或少对事务都有一些理解了.今天的我也对事务有了更深一层的理解对我来说,我想与大家一起分享一下. 解析: 1.ADO.NET提供了事务处理功能 2.C#中开启事务 3.在 ...
- eclipse更改workspace中出现The superclass "javax.servlet.http.HttpServlet" was not found on the Java----问题》》
第一步:那是因为在项目中没有告诉它应该在哪个tomcat中运行,右击项目名称----->build path-->configure path---->library------ ...
- PHP两种基础的算法：冒泡、快速排序法》》》望能够帮助到大家
首先扯个淡@@@@@@@@@ 算法是程序的核心,一个程序的好坏关键是这个程序算法的优劣. 冒泡排序法 原理:在要排序的一组数中,对当前还未排好的序列,从前往后对相邻的两个数依次进行比较和调整,让较大的 ...
随机推荐
- Elasticsearch集群调优
系统调优 禁用swap 使用swapoff命令可以暂时关闭swap.永久关闭需要编辑/etc/fstab,注释掉swap设备的挂载项. swapoff -a 如果完全关闭swap不可行,可以试着降低s ...
- html网页中加载js脚本 下载下来是乱码（文件编码格式）
问题描述: 在一个index.html网页中,引入了jquery脚本,但是却出现错误,提示$ is not defined <!DOCTYPE html> <html lang=&q ...
- Android开发之漫漫长途 Ⅰ——Android系统的创世之初以及Activity的生命周期
该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>中的相关知识,再次表示该书 ...
- Hadoop 2.2.0单节点的伪分布集成环境搭建
Hadoop版本发展历史 第一代Hadoop被称为Hadoop 1.0 1)0.20.x 2)0.21.x 3)0.22.x 第二代Hadoop被称为Hadoop 2.0(HDFS Federatio ...
- JSP 学习笔记
JSP 全名为Java Server Pages,中文名叫java 服务器页面,它是在传统的 HTML 页面中插入 JAVA 代码片段和 JSP 标签形成的文件. 上一篇 Servlet 中只是讲解了 ...
- 【2】构建一个SSM项目结构
初步思考一下这个项目的结构,由于是给一个比较老的公司做这个外包项目,服务器是搭建在windows操作系统上的Tomcat6.0,系统的JDK版本也是JDK1.6,都是比较旧. 数据库方面有专人负责,所 ...
- Katana-CookieAuthenticationMiddleware-源码浅析
准备工作 第一步,建立一个模板项目 本文从CookieAuthenticationMiddleware入手分析,首先我们来看看哪里用到了这个中间件,打开VisualStudio,创建一个Mvc项目,然 ...
- 用StringBuilder和StringBuffer实现的Unicode解码方法的比较（Java）
初衷是用正则来写一个Unicode字符串转码的方法,一开始是打算结合StringBuilder写的,但是看到jdk7的Matcher.appendReplacement文档中一段示例代码用了Match ...
- Java 读取 .properties 配置文件的几种方式
Java 开发中,需要将一些易变的配置参数放置再 XML 配置文件或者 properties 配置文件中.然而 XML 配置文件需要通过 DOM 或 SAX 方式解析,而读取 properties 配 ...
- web-php绕过
0x01.web-PHP的悖论1 题目: 链接:http://game.sycsec.com:2009/10111.php 解题思路: 1.首先,web对于选择二进制方向的我这个菜鸡绝对是十分懵逼的, ...