<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.min.js"></script>

    <style>

        ul li{

            list-style: none;

            display: inline-block;

            border: 1px solid cornflowerblue;

            height:40px;

            line-height: 40px;

            width: 120px;

            text-align: center;

        }

    </style>

</head>

<body>

<div id="d1">

    <ul>

        <li><span v-on:click="qh(1)">产品介绍</span></li>

        <li><span v-on:click="qh(2)">规格与包装</span></li>

        <li><span v-on:click="qh(3)">售后服务</span></li>

    </ul>

    <div v-show="temp1">产品介绍</div>

    <div v-show="temp2">规格与包装</div>

    <div v-show="temp3">售后服务</div>

</div>

</body>

<script>

    var v1=new Vue({

        el:'#d1',

        data:{

            temp1:true,

            temp2:false,

            temp3:false,

        },

        methods:{

            qh:function (t) {

                if(t==2){

                    v1.temp1=false

                    v1.temp2=true

                    v1.temp3=false

                }else if (t==3){

                    v1.temp1=false

                    v1.temp2=false

                    v1.temp3=true

                }else {

                    v1.temp1=true

                    v1.temp2=false

                    v1.temp3=false

                }

            }

        }

    })

</script>

</html>

vue动态切换页面的更多相关文章

  1. 第八十七篇：Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  2. vue动态设置页面title方法

    第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wech ...

  3. vue动态切换视图

    big.vue <template> <div> big <p>{{view}}</p> <!--标准规范--> <component ...

  4. Vue Spa切换页面时更改标题

    在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet. ...

  5. VUE 动态切换列表active样式

    参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html 需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背 ...

  6. vue动态切换组件

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

  7. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  8. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  9. vue获得当前页面URL动态拼接URL复制邀请链接方法

    vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...

随机推荐

  1. python 内置数据类型之字符串

    1.3 字符串 字符串本身就是一个有序(从左至右)的字符的集合.是序列这种类型的一种,后面还要学习列表与元组. 在这一节中,需要了解字符串的定义,特殊字符,转义与抑制转义:字符串基本操作.格式化等. ...

  2. 使用powerdesigner导入sql脚本，生成物理模型

    有些时候我们的powerdesigner以jdbc的形式链接本地数据库可能会失败,这时候我觉得从sql文件中生成物理模型是个很不错的方法 1.打开powerdesigner,文件->->r ...

  3. HDU 4763 Theme Section(KMP灵活应用）

    Theme Section Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  4. Android补间动画、帧动画和属性动画使用知识介绍

    https://blog.csdn.net/zhangqunshuai/article/details/81098062

  5. some advice in work

    给研究生的建议 文档抄袭自:北航大佬 Fei-Fei Li:De-Mystifying Good Research and Good Papers (repost) 如何提升你的能力?给年轻程序员的几 ...

  6. 2018 UESTC 线段树专题

    A - 一棵简单的线段树 A[1...n]初始全为0. 1. 给两个数p 和 x(1≤p≤n),单点更新 A[p] <- x 2. 给两个数L和R (1≤L<R≤n),  L到R区间里这几 ...

  7. Ubuntu安装搜狗sougou输入法

    昨天ubuntu闪屏后进不去系统,之后重新安装的Ubuntu14.04,在软件中心安装了新立得软件包管理器 在网上下载搜狗输入法forlinux 网址:http://pinyin.sogou.com/ ...

  8. 【技巧汇总】eclipse中如何跳转到指定行

    技巧汇总 持续更新ing eclipse中如何跳转到指定行 ctrl+L

  9. Vue axios 返回数据绑定到vue对象问题

    在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报 ...

  10. Nginx编译安装：

    第三方模块 在nginx.org   --------  wiki  找 --add-module=   添加 Nginx编译安装: 安装开发环境 ]# yum groupinstall " ...