<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. 《Javascript DOM编程艺术》学习笔记 第1-6章

    第1章 Javascript简史 Javascript是Netspace公司与Sun公司合作开发的,Javascript 1.0版于1995年推出. 为与微软公司竞争,Netspace公司和Sun公司 ...

  2. Linux设置文件权限和归属

    前言:在Linux文件系统的安全模型中,为系统中的文件(或目录)赋予了两个属性:访问权限和文件所有者,简称为“权限”和“归属”.其中,访问权限包括读取.写入.可执行三种基本类型,归属包括属主(拥有该文 ...

  3. springboot web - 启动(4) tomcat

    接第二篇 第二篇里面, 看到容器创建的是 AnnotationConfigServletWebServerApplicationContext 类型. 一 .类图 二. 构造 public Gener ...

  4. 【spring】jdbcTemplate之sql参数注入

    demo @Repository("jdbcDao") public class JdbcTemplateDao { @Autowired private JdbcTemplate ...

  5. 剑指offer-面试题30-包含min函数的栈-栈

    /* 题目: 定义栈的数据结构,实现一个能够得到栈的最小元素的min函数. */ /* 思路: 错误思路:每次保存当前最小的元素,如果当前最小元素弹出,最小元素是谁? 正确思路:两个栈,一个栈保存数据 ...

  6. 剑指offer-面试题17-打印从1到最大的n位数-数字

    /* 题目: 输入数字n,按顺序打印从1到最大的n位十进制数. 如输入3,打印从1,2,3到999. */ /* 思路: 大数问题转化为字符串或数组. */ #include<iostream& ...

  7. 2020牛客寒假算法基础集训营4-I 匹配星星【贪心】

    链接:https://ac.nowcoder.com/acm/contest/3005/I来源:牛客网 示例1 输入 复制 2 1 1 0 2 2 1 2 1 1 0 2 2 1 输出 复制 1 1 ...

  8. Qt Gui 第七章

    1.processEvents 该函数用来处理窗口的各种事件,重绘和event ; row < RowCount; ++row) { ; column < ColumnCount; ++c ...

  9. 使用ResXmanager实现多语言[转]

    1 多國語系 - 使用RESXMANAGER管理資源檔 1.1 前言 在實作多國語系網站時,針對靜態文字多會使用資源檔(Resource)來對應出各語系所需顯示的內容.由於資源檔可能會依照特定結構放式 ...

  10. 小程序图片上传,长按删除,weui

    <view class="weui-cells"> <view class="weui-cell"> <view class=&q ...