<!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请求数据时什么时候用GET,什么时候用POST

    GET的目的就如同其名字一样是用于获取信息的.它旨在显示出页面上你要阅读的信息.浏览器会缓冲GET请求的执行结果,如果同样的GET请求再次发出,浏览器就会显示缓冲的结果而不是重新运行整个请求.重新请求 ...

  2. shiro配合html页面完成细粒化权限控制

    shiro配合html页面完成细粒化权限控制 原创 2016年10月04日 12:02:34 标签: shiro / 框架 / 界面 / 权限 8924 shiro是现在非常普遍使用的java权限框架 ...

  3. ConfigurationManager 类的使用

    一.引用 命名空间:   System.Configuration程序集:  System.Configuration(位于 System.Configuration.dll) 二.示例 1.读取.增 ...

  4. 没有-jackson相关依赖会抛出如下异常--------在spring官方文档有解释

    <!--jackson相关依赖--><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackso ...

  5. HDU 1166 敌兵布阵（线段树/树状数组模板题）

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  6. .Net(C#)用正则表达式清除HTML标签（包括script和style），保留纯本文(UEdit中编写的内容上传到数据库)

    去官网下载,本Demo用的MVC模式 下载地址:http://ueditor.baidu.com/website/download.html 加入文件夹中的结构: 引入了函数公式的图标: @{ Vie ...

  7. jQuery 核心 - noConflict() 方法[避免冲突的方法]

    定义和用法 noConflict() 方法让渡变量 $ 的 jQuery 控制权. 语法 jQuery.noConflict([removeAll]) 参数描述removeAll布尔值.指示是否允许彻 ...

  8. noi2016旷野大作战

    玩了差不多两个小时61分 大概第9个点可以再拿5-6分 但是挺麻烦的并不想搞.. 这道题还是比较考验智商的??以及对那个特殊的ln函数的应用 感觉题目出的挺好的 看了题解 发现第4个点的确我应该想不到 ...

  9. PrintDocument打印、预览、打印机设置和打印属性的方法

    WindowsForm 使用 PrintDocument打印.预览.打印机设置和打印属性的方法. private void Form1_Load(object sender, System.Event ...

  10. Asp.net 与 UCenter 用户同步之实施过程

    在写这篇文章的时候,我还在想,这篇文章也许能给你带来一些收获,但或许会令你更加的迷茫,为什么会这样?因为:1.UCenter虽然足够强大,但正为它的强大,它的不少暗箱操作使得我们望而生畏,我们不害怕出 ...