<!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. ajax对象方法的使用

    change.js文件的内容对象函数关键字:fnjQuery.fn.change = function () { this.css({"background": "red ...

  2. ORACLE EHCC(exadata hybrid columnar compression)

    目录: 1. 简介 2. 压缩方式及压缩比 3. 压缩哪些数据 4. 可能有用的脚本 一.简介 EHCC(Exadata Hybrid Columnar Compression),是Oralce 数据 ...

  3. linux：安装并使用mongo

    1.下载mongo:  curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0.6.tgz 2.解压: tar -zxvf ...

  4. 【转】asp.net Core 系列【二】—— 使用 ASP.NET Core 和 VS2017 for Windows 创建 Web API

    在本教程中,将生成用于管理“待办事项”列表的 Web API. 不会生成 UI. 概述 以下是将创建的 API: API 描述 请求正文 响应正文 GET /api/todo 获取所有待办事项 无 待 ...

  5. mysql 简称

    一:DTS(Data Transformation Service) 数据转换服务 大多数组织都使用多种格式和多个位置来存储数据. 为了支持决策.改善系统性能或对现有系统进行升级,经常必须将数据从一个 ...

  6. What is base..ctor(); in C#?

    I am disassembling some C# applications and I am trying to reconstruct the source code. I am disasse ...

  7. Mac Mojave(10.14.1)执行Matlab的mex报错

    先装了matlab2018b,发现很频繁的crash,同时考虑到要跑的代码在>=2017a时就计算错误,于是转战matlab2016b matlab2016b安装后,执行mex -setup报错 ...

  8. SSD垃圾回收

    A complete GC typically:includes four steps: selecting some blocks that contain somestale data as vi ...

  9. springboot快速使用

    1.编写SpringConfig 用于实例化Spring容器 @Configuration //通过该注解来表明该类是一个Spring的配置,相当于一个xml文件 @Bean // 通过该注解来表明是 ...

  10. 解决Windows Server 2008R2通过计划任务定时执行bat文件，显示成功但实际未执行

    前段时间在Windows Server 2008安装了一套基于MySQL数据库的软件,处于数据安全的考虑,希望每天能够自动进行数据库备份.我在别人脚本的基础上自己写了一个数据库备份的bat脚本,双击该 ...