<!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. selenium+python-文件下载（SendKeys）

    前言 文件下载时候会弹出一个下载选项框,这个弹框是定位不到的,有些元素注定定位不到也没关系,就当没有鼠标,我们可以通过键盘的快捷键完成操作. SendKeys库是专业的处理键盘事件的,所以这里需要用S ...

  2. Python(字符串操作实例1)一个字符串用空格隔开

    # 将字符中单词用空格隔开# 已知传入的字符串中只有字母,每个单词的首字母大写,# 请将每个单词用空格隔开,只保留第一个单词的首字母大写传入:“HelloMyWorld”# 返回“Hello my w ...

  3. 计蒜客31452 Supreme Number（找规律)

    A prime number (or a prime) is a natural number greater than 11 that cannot be formed by multiplying ...

  4. DevOps 在公司项目中的实践落地

    原文出处:https://www.cnblogs.com/beef/p/7743594.html ref: [DevOps]团队敏捷开发系列--开山篇 https://www.cnblogs.com/ ...

  5. java.net.UnknownHostException: master

    1:如果你报这个错误,第一反应应该是本地的host文件没有配置服务器名称和对应的ip地址,这个反应就对了.贴一下错误和解决方法: java.net.UnknownHostException: mast ...

  6. axios简单使用

    介绍 我在使用vue的时候使用到了axios,vue 1.0的版本作者推荐使用vue-resource,到了vue 2.0作者建议使用axios,此篇文章只是我在使用axios时候做的笔记,我遇到的一 ...

  7. fputcsv导出大量数据

    <?php set_time_limit(0); ini_set('memory_limit', '128M'); $fileName = date('YmdHis', time()); hea ...

  8. net core体系-web应用程序-4asp.net core2.0 项目实战（1）-3项目架构说明

    本文目录1. 摘要2. 框架介绍 3. 权限管理之多一点说明4. 总结 1.  摘要 NCMVC角色权限管理框架是由最近练习Net Core时抽时间整理的系统,后续能不能发展成一个cms还要看朋友们是 ...

  9. 关于window.open窗口的resize事件

    jQuery 事件 - resize() 方法 当调整浏览器窗口的大小时,发生 resize 事件. resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数. & ...

  10. IDEA创建SpringBoot项目

    创建SpringBoot有三种方式: 方式一:(常用方式)