<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. springBoot 与 springMVC的区别

    springMVC 1.是基于Servlet的一个MVC框架(DispatcherServlet.ModelAndView.ViewResolver),解决web开发问题 缺点是 :配置复杂 要简化使 ...

  2. PHP OOP

    <?php //1. Class and object /* object-oriented concept an object can be almost any items or conce ...

  3. jQuery笔记(四)jQuery中的动画

    jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...

  4. 剑指offer-面试题8-二叉树的下一个节点-二叉树

    /* 题目: 给定一棵二叉树和其中一个节点,找出中序遍历的下一个节点. */ /* 思路: 两种情况: 节点存在右子树:节点右子树的最左节点: 节点不存在右子树,节点向上一直找父节点或祖父节点,直到其 ...

  5. python之路(列表,元组)

    列表 list:基础数据类型之一,可以索引,切片,步长,切片+步长可以增删改查,可迭代,可嵌套字典,元组,列表 一.索引,切片,步长 list01 = [1,2,3,'eric','west'] 1. ...

  6. The Way to Home CodeForces - 910A

    4个月前做的一道题,当时不知道为什么,写了一个bfs,直接就超时了. 现在再看这个题目,发现就是一个简单的贪心,每次走最远即可. #include <bits/stdc++.h> usin ...

  7. php 获取视频时长

    利用ffmpeg只能获取到本地视频的信息. function video_time($file) { ob_start(); passthru(sprintf(FFMPEG_PATH, $file)) ...

  8. Net项目添加 WebAPI

    1.新建一个  WebApiConfig.cs public static void Register(HttpConfiguration config) { // Web API 配置和服务 // ...

  9. Python中io的open()在PyCharm环境下报错和路劲的问题

    PS:我也是初学者,上班空闲时间学习学习Python.今天学到io的时候,遇到了两个用PyCharm环境编写代码的小白错误,如下: 两个问题都是如下代码: 1. 第一个问题:当写好代码之后,点击运行报 ...

  10. R语言函数化学习笔记6

    R语言函数化学习笔记 1.apply函数 可以让list或者vector的元素依次执行一遍调用的函数,输出的结果是list格式 2.sapply函数 原理和list一样,但是输出的结果是一个向量的形式 ...