<template>
<div> <div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else-if="type === 'D'">D</div>
<div v-else>Not A/B/C</div> <div @click="c1()">
<div @click.stop="c2()"> <!--阻止冒泡-->
click
</div> </div>
</div> </template>
<script>
export default{
data(){
return {
type: "a",
}
},
computed : { },
methods : {
c2 : function(){
alert('c2');
},
c1 : function(){
alert('c1');
},
} }
</script>

vue项目单页的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. 使用Vue构建单页应用一

    一. 环境准备 1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本.Node. ...

  3. 一套Vue的单页模板:N3-admin

    趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...

  4. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  5. Vue 部署单页应用,刷新页面 404/502 报错

    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...

  6. vue实现单页应用demo

    vue + webpack +ES6/7 + axiso + vuex + vue-router构建项目前端,node + express + mongodb 开发后台 项目demo地址 https: ...

  7. vue项目多页配置

    文件目录 ├─build ├─config ├─dist │ └─static │ ├─css │ ├─img │ └─js ├─src │ ├─assets │ │ ├─img │ │ ├─js │ ...

  8. vue 修改单页标题 --- document.title

    方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title 方法2. <head> <meta http-equiv=&q ...

  9. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

随机推荐

  1. .7、void*

    void * 是一种特殊的指针类型,可用于存放任意类型的地址.与其他指针类似,不同的是,我们对该地址中到底是一个什么类型的对象不了解,因此我们不能直接操作void * 所指的对象. ; int *p ...

  2. 当课堂因监控技术变“囚笼”,存在争议的AI使用场景该被抵制吗?

    当马云和马斯克高谈阔论AI是否会影响人类社会时,尚无"感情"的AI已在校园中"作恶".近日,一张AI监控课堂的GIF在网上迅速刷屏.这张GIF中记录了课堂中所有 ...

  3. Radmin Server v3.5.1 汉化破解绿色版 第四版

    下载:https://pan.baidu.com/s/1skOXffJ 使用方法:1.运行“安装.bat”,安装过程静默,安装后无托盘图标,不创建任何快捷方式.2.运行“设置.bat”,进入 radm ...

  4. dp --A - Super Jumping! Jumping! Jumping!

    A - Super Jumping! Jumping! Jumping! Nowadays, a kind of chess game called “Super Jumping! Jumping! ...

  5. mui下拉上拉(明一)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. Android记事本在菜单栏添加搜索按钮方法

    效果图 这个app结构和我之前将记事本开发的博客基本一致,我这里直接讲一下怎样添加 使用的开发软件为android studio 首先在res目录下新建文件夹menu,添加目录布局文件main_men ...

  7. Keras高层API之Metrics

    在tf.keras中,metrics其实就是起到了一个测量表的作用,即测量损失或者模型精度的变化.metrics的使用分为以下四步: step1:Build a meter acc_meter = m ...

  8. sublime text3 控制台 Package Control 的安装与使用方法

    下载安装 sublime text3 直接网上搜sublime text3 下载即可,安装很简单 下一步就行,这里主要说明sublime text3 控制台 Package Control 的安装与使 ...

  9. 0013 基于DRF框架开发(01 基类视图 APIView)

    之前学习了模型序列化和普通序列化,我们用最简单的视图和url实现了对序列化的操作. 而实际上,象之前那种由DRF自动生成所有的视图和url的情况,在应用是使用很少.而需要用户根据实际业务需求,自定义视 ...

  10. PAT (Advanced Level) Practice 1027 Colors in Mars (20 分)

    People in Mars represent the colors in their computers in a similar way as the Earth people. That is ...