<!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. easyui 布局之window和panel一起使用时，拉动window宽高时panel不跟随一起变化

    项目开发中布局是每一个组件都由最外层的window和内部的至少一个panel组成,其他的细小组件再依次放到panel中. 问题:当拉动外部的window时我们希望内部的panel的宽高也跟着变化,但是 ...

  2. jQuery---过滤选择器

    4.过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS 中的伪类选择器语法相同,即选择器都以一个冒号(:)开头.按照不同的过滤规则, 过滤选择器可以分为基本过滤. ...

  3. mysql常见安全加固策略

    原创 2017年01月17日 21:36:50 标签: 数据库 / mysql / 安全加固 5760 常见Mysql配置文件:linux系统下是my.conf,windows环境下是my.ini: ...

  4. Exchange Server Notes

    以下信息来自Option响应: HTTP/1.1 200 OK Cache-Control: private Allow: OPTIONS,POST Server: Microsoft-IIS/7.0 ...

  5. 使用layer弹出Ueditor实现父子传值

    Layear的代码:     function tankuang() {        layer.open({            type: 2,            title: false ...

  6. Caused by: java.net.ConnectException: Connection refused/Caused by: java.lang.RuntimeException: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    1.使用sqoop技术将mysql的数据导入到Hive出现的错误如下所示: 第一次使用命令如下所示: [hadoop@slaver1 sqoop--cdh5.3.6]$ bin/sqoop impor ...

  7. Redis-Sentinel 哨兵

    为什么需要哨兵? 一旦主节点宕机,那么需要人为修改所有应用方的主节点地址(改为新的master地址),还需要命令所有从节点复制新的主节点 那么这个问题,redis-sentinel就可以解决了 什么是 ...

  8. 10本Java架构师必读书籍

    1.大型网站系统与JAVA中间件实践 本书围绕大型网站和支撑大型网站架构的Java中间件的实践展开介绍. 从分布式系统的知识切入,让读者对分布式系统有基本的了解:然后介绍大型网站随着数据量.访问量增长 ...

  9. php让一个数组按照另外一个数组的键名进行排序

    $a = [ 'id', 'name', 'identityId', 'phone', 'email', 'schoolId' ]; $b = [ 'id' => '唯一标识', 'identi ...

  10. 函数防抖 debounce

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