vue项目单页
<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项目单页的更多相关文章
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 使用Vue构建单页应用一
一. 环境准备 1 安装Node.js 最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/ 我使用的是 v6.3.1 Current 版本.Node. ...
- 一套Vue的单页模板:N3-admin
趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...
- vue实现单页应用demo
vue + webpack +ES6/7 + axiso + vuex + vue-router构建项目前端,node + express + mongodb 开发后台 项目demo地址 https: ...
- vue项目多页配置
文件目录 ├─build ├─config ├─dist │ └─static │ ├─css │ ├─img │ └─js ├─src │ ├─assets │ │ ├─img │ │ ├─js │ ...
- vue 修改单页标题 --- document.title
方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title 方法2. <head> <meta http-equiv=&q ...
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
随机推荐
- 《Javascript DOM编程艺术》学习笔记 第1-6章
第1章 Javascript简史 Javascript是Netspace公司与Sun公司合作开发的,Javascript 1.0版于1995年推出. 为与微软公司竞争,Netspace公司和Sun公司 ...
- Linux设置文件权限和归属
前言:在Linux文件系统的安全模型中,为系统中的文件(或目录)赋予了两个属性:访问权限和文件所有者,简称为“权限”和“归属”.其中,访问权限包括读取.写入.可执行三种基本类型,归属包括属主(拥有该文 ...
- springboot web - 启动(4) tomcat
接第二篇 第二篇里面, 看到容器创建的是 AnnotationConfigServletWebServerApplicationContext 类型. 一 .类图 二. 构造 public Gener ...
- 【spring】jdbcTemplate之sql参数注入
demo @Repository("jdbcDao") public class JdbcTemplateDao { @Autowired private JdbcTemplate ...
- 剑指offer-面试题30-包含min函数的栈-栈
/* 题目: 定义栈的数据结构,实现一个能够得到栈的最小元素的min函数. */ /* 思路: 错误思路:每次保存当前最小的元素,如果当前最小元素弹出,最小元素是谁? 正确思路:两个栈,一个栈保存数据 ...
- 剑指offer-面试题17-打印从1到最大的n位数-数字
/* 题目: 输入数字n,按顺序打印从1到最大的n位十进制数. 如输入3,打印从1,2,3到999. */ /* 思路: 大数问题转化为字符串或数组. */ #include<iostream& ...
- 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 ...
- Qt Gui 第七章
1.processEvents 该函数用来处理窗口的各种事件,重绘和event ; row < RowCount; ++row) { ; column < ColumnCount; ++c ...
- 使用ResXmanager实现多语言[转]
1 多國語系 - 使用RESXMANAGER管理資源檔 1.1 前言 在實作多國語系網站時,針對靜態文字多會使用資源檔(Resource)來對應出各語系所需顯示的內容.由於資源檔可能會依照特定結構放式 ...
- 小程序图片上传,长按删除,weui
<view class="weui-cells"> <view class="weui-cell"> <view class=&q ...