1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style>
  8.             .active {
  9.                 color: red;
  10.             }
  11.  
  12.             .text-success {
  13.                 color: #009966;
  14.                 font-size: 20px;
  15.             }
  16.  
  17.             .fontWeight {
  18.                 font-weight: bold;
  19.             }
  20.         </style>
  21.     </head>
  22.  
  23.     <body>
  24.         <div id="list">
  25.             <ul>
  26.                 <div v-bind:class="[fontWeight,textSuccess]">欢迎品尝</div>
  27.                 <input type="text" v-model="moonstuffing" maxlength="5" placeholder="请输入您喜欢的月饼馅" />
  28.                 <div v-bind:class="classObject">中秋节月饼馅</div>
  29.                 <li v-for="item in mooncake">{{item}}</li>
  30.  
  31.             </ul>
  32.             <div v-bind:style="obj">花好月圆夜</div>
  33.             <my-component v-bind:class="textSuccess" v-bind:message="txt"></my-component>
  34.             <!--自定义UI组件-->
  35.  
  36.             <user-input v-if="ok" :message="user.loginType" :changevalue="changevaluefn"  :values="username" :types="user.textType" :placeholdertext="user.placeText" key="username"></user-input>
  37.             <user-input v-else :message="user.loginType"  :changevalue="changevaluefn"   :values="useremail" :types="user.textType" :placeholdertext="user.placeText" key="useremail"></user-input>
  38.  
  39.             <button @click="change">点击切换</button>
  40.  
  41.             <hr />
  42.  
  43.             <!--<template> 元素当做包装元素-->
  44.             <template v-if="qiehuan">
  45.               <label>Username</label>
  46.               <input placeholder="Enter your username" key="username-input">
  47.             </template>
  48.  
  49.             <template v-else>
  50.               <label>Email</label>
  51.               <input placeholder="Enter your email address" key="email-input">
  52.             </template>
  53.  
  54.             <button @click="tab">点击切换（使用包装元素）</button>
  55.  
  56.             <hr />
  57.  
  58.             <div v-show="ok">
  59.                 哈哈我显示了
  60.             </div>
  61.  
  62.             <!-- v-for  v-if  结合使用-->
  63.             <h1> v-for  v-if  结合使用</h1>
  64.             <ul>
  65.                 <li v-for = "item in money" v-if="item.price <= 40">{{item.txt}}</li>
  66.  
  67.             </ul>
  68.  
  69.         </div>
  70.     </body>
  71.     <script src="js/vue.js"></script>
  72.  
  73.     <script type="text/javascript">
  74.         Vue.component('user-input', {
  75.             template: '<div><label>{{message}}</label><input :value="values" @input="changevalue" @onpropertychange="changevalue" :type="types" :placeholder="placeholdertext"></div>',
  76.             props: ["message", "types", "placeholdertext","values","changevalue"],
  77.  
  78.         })
  79.  
  80.         Vue.component('my-component', {
  81.             template: '<p class="foo bar">{{message}}</p>',
  82.             props: ["message"]
  83.         })
  84.  
  85.         var moon = new Vue({
  86.             el: "#list",
  87.             data: {
  88.                 ok:true,
  89.                 qiehuan:true,
  90.                 isActive: true,
  91.                 isSuccess: true,
  92.                 moonstuffing: '',
  93.                 mooncake: ["蛋黄", "五仁", "豆沙", "莲蓉"],
  94.                 fontWeight: "fontWeight",
  95.                 textSuccess: "text-success",
  96.                 txt: "哈哈",
  97.                 activeColor: "red",
  98.                 fontSize: 60,
  99.                 obj: {
  100.                     color: "red",
  101.                     fontSize: "60px"
  102.                 },
  103.                 user: {
  104.                     loginType: "username",
  105.                     textType: "email",
  106.                     placeText: "请输入用户名"
  107.                 },
  108.                 username:'用户名',
  109.                 useremail:'邮箱',
  110.                 money:[
  111.                        {price: 10,txt:"10元"},
  112.                        {price: 20,txt:"20元"},
  113.                        {price: 30,txt:"30元"},
  114.                        {price: 40,txt:"40元"},
  115.                        {price: 50,txt:"50元"},
  116.                        {price: 60,txt:"60元"},
  117.                        {price: 70,txt:"70元"},
  118.                        {price: 80,txt:"80元"}
  119.                      ]
  120.  
  121.             },
  122.             methods: {
  123.  
  124.                 change: function() {//点击按钮切换
  125.  
  126.                     if(this.ok) {
  127.                         this.ok = false;//控制组件显示隐藏
  128.  
  129.                         this.user = {
  130.                             loginType: "email",
  131.                             textType: "email",
  132.                             placeText: "请输入邮箱"
  133.                         }
  134.  
  135.                     } else {
  136.  
  137.                         this.ok = true;//控制组件显示隐藏
  138.  
  139.                         this.user = {
  140.                             loginType: "username",
  141.                             textType: "text",
  142.                             placeText: "请输入用户名"
  143.                         }
  144.  
  145.                     }
  146.  
  147.                 },
  148.                 changevaluefn:function(e){//监听值变化
  149.                     var e = e || window.event;
  150.                     var target  = e.target || e.srcElement;
  151.  
  152.                     if(this.ok) {
  153.                         this.username = target.value //接收用户名
  154.                     } else {
  155.                         this.useremail = target.value//接收邮箱
  156.  
  157.                     }
  158.                 },
  159.                 tab:function() {//点击按钮切换
  160.  
  161.                     if(this.qiehuan) {
  162.                         this.qiehuan = false;
  163.  
  164.                     } else {
  165.  
  166.                         this.qiehuan = true;//控制组件显示隐藏
  167.  
  168.                     }
  169.  
  170.                 }
  171.             },
  172.             watch: { //监听数据发送改变
  173.                 moonstuffing: function(newValue, oldValue) { //监听属性
  174.                     console.log(oldValue)
  175.                     if(newValue != '') {
  176.                         moon.mooncake.push(newValue)
  177.                         moon.isActive = true;
  178.                     } else {
  179.                         moon.isActive = false;
  180.                     }
  181.                 }
  182.             },
  183.  
  184.             computed: {
  185.                 classObject: function() {
  186.                     return {
  187.                         active: this.isActive,
  188.                         'text-success': this.isSuccess
  189.                     }
  190.                 }
  191.             }
  192.         })
  193.     </script>
  194.  
  195. </html>

》》vue的更多相关文章

  1. 《《我是一只IT小小鸟》》读后感

    接触IT也已经半年了,在这半年我没有充足的时间去了解IT这个行业,在大学生职业规划课程上,老师推荐了<<我是一只IT小小鸟>>这本书,我才发现IT这个行业并不是想象的那么无趣, ...

  2. 【图文详细教程】maven3安装配置+eclipse离线安装maven3插件《《唯一成功的教程~~~2018-01-09》》

    环境搭建前提: 1.电脑上已经安装了1.7以及以上版本的JDK(因为我提供的maven版本是最新的3.3.9的,要求最低JDK1.7) 2.配置好了ecplise并且能正常启动 第一步:下载maven ...

  3. jsp---》》》新闻发布系统的项目跟踪+++++++文件上传

    先来一个分层架构图: WeebRoot目录下的页面: 现在,此项目以实现登录,注销,新闻列表,编辑主题>>>> 先来登录部分的关键代码 index.jsp中的代码 userIn ...

  4. 读《《图解TCP-IP》》有感

    读<<图解TCP/IP>>有感 TCP/IP 近期几天读完<<图解TCP/IP>>,收获蛮多,记得上学时读stevens的<<TCP/IP具 ...

  5. heavy dark--读《《暗时间》》

    本书名为<<暗时间>>,个人觉得是一个非常好的名字:1.迷茫的大学生有多少的业余时间,但又浪费多少的业余时间,浪费的这莫多时间就如同人在黑夜中一样,大脑是在休息的状态.这是第一 ...

  6. hadoop 》》 django 简单操作hdfs 语句

    >> from django.shortcuts import render # Create your views here. from hdfs.client import Clien ...

  7. 实体类在Windows程序中的高级应用--------------------》》心境是一种境界。

    一.事务 我们在大家学到这,或多或少对事务都有一些理解了.今天的我也对事务有了更深一层的理解对我来说,我想与大家一起分享一下. 解析: 1.ADO.NET提供了事务处理功能 2.C#中开启事务 3.在 ...

  8. eclipse更改workspace中出现The superclass "javax.servlet.http.HttpServlet" was not found on the Java----问题》》

    第一步:那是因为在项目中没有告诉它应该在哪个tomcat中运行,右击项目名称----->build path-->configure   path---->library------ ...

  9. PHP两种基础的算法：冒泡、快速排序法》》》望能够帮助到大家

    首先扯个淡@@@@@@@@@ 算法是程序的核心,一个程序的好坏关键是这个程序算法的优劣. 冒泡排序法 原理:在要排序的一组数中,对当前还未排好的序列,从前往后对相邻的两个数依次进行比较和调整,让较大的 ...

随机推荐

  1. 初入servlet：Allocate exception for servlet

    老板,来一碗错误垫垫肚子! 如果以下几个错误都符合,估计就是这个原因了. 页面报错如下: java.lang.NoClassDefFoundError:IllegalName: firstDemo/T ...

  2. gbdt的面试要点总结-上篇

    1.简介 gbdt全称梯度下降树,在传统机器学习算法里面是对真实分布拟合的最好的几种算法之一,在前几年深度学习还没有大行其道之前,gbdt在各种竞赛是大放异彩.原因大概有几个,一是效果确实挺不错.二是 ...

  3. kafka学习笔记1:测试环境搭建

    最近因为架构中引入了kafka,一些之前在代码中通过RPC调用强耦合但是适合异步处理的内容可以用kafka重构一下. 考虑从头学一下kafka了解其特性和使用场景. 环境选择 首先是测试环境的搭建,平 ...

  4. bzoj1001（对偶图最短路）

    显然是个最大流问题. 边数达到了10^6级别,显然用dinic算法会TLE 对于一个平面图来说,当然用对偶图的最短路来求最小割(最大流) SPFA转移的时候注意判断边界情况 应该要开longlong才 ...

  5. js规范

    js规范 Array 和 Object 直接量 为了避免这些歧义, 我们应该使用更易读的直接量来声明. var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 ...

  6. java.io.File类操作

    一.java.io.File类 String path="E:/222/aaa";//路径 String path1="aaa.txt"; File file= ...

  7. mysql多个TimeStamp设置（转）

    原文地址:http://www.cnblogs.com/yjf512/archive/2012/11/02/2751058.html timestamp设置默认值是Default CURRENT_TI ...

  8. 创建mysql快捷登录方式

    1.先找到mysql的bin目录,将Mysql.exe发送快捷方式到桌面,到这里还没有完成. 2.然后右键选择属性,将目标后面添加上 -uroot -p 我的完整目标如下: D:\install\my ...

  9. 基于Spring开发的一个BIO-RPC框架(对新人很友好)

    PART1:先来整体看下项目的构成 其中bio-rpc-core就是所谓的rpc框架 bio-rpc-example-client即所谓的服务调用方(你的项目中想要调用服务的地方) bio-rpc-e ...

  10. TCP：传输控制协议

    概述: 书中采用了8章来介绍TCP,可见其重要性.TCP是一种面向连接的.可靠的字节流服务,也就是说两方要交换数据必须先建立一个连接. TCP的信息单位称为segment.TCP对字节流的内容不作任何 ...