vue初识 --- table切换

HTML:

<div id="box">
    <ul>
        <li v-for="(item,index) in items" v-text="item" @click="clk(index)" @mouseover="clk(index)" @mouseout="clk(0)" class="tab_li"></li>
    </ul>
    <div v-for="(item,index) in arry" v-show="index === flg ? true : false"  v-text="item.txt" class="count"></div>
</div>

JS :

<script>
//渲染
new Vue({
    el: "#box",
    data:{
        //初始化显示第1个div里面的内容
        flg:0,
        //items是从后台获取到的li内容
        items:["标签1","标签2","标签3"],
        // arry是从后台获取到的div中要显示的内容
        arry:[
            {"txt":"这是第 1 个div标签"},
            {"txt":"这是第 2 个div标签"},
            {"txt":"这是第 3 个div标签"}
        ]
    },
    //所有的事件方法集合
    methods: {
        clk(idx){
            // 点击的第几个li显示第几个div的内容
             this.flg = idx;
        }
    }
})
</script>

效果:

总结:

实现了完全动态展示的table切换,从html中可以看出,我们是没有一个写死的文字或者数据的。

某一天,当产品要修改里面的文本内容的时候,我们是不需要做任何修改的,只要后台去修改就ok啦。

不用前端做什么的修改,是不是超开心。^_^



vue初识 --- table切换

原文地址:https://www.cnblogs.com/zwh520/p/9662902.html

时间: 2024-11-11 13:41:11

vue初识 --- table切换的相关文章

table切换

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自己动手做个简单的jquery版table切换,部分注释</title><meta name="keywords" content="jQuery切换,ta

vue实现选项卡切换效果

效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta charset="UTF-8"> <base target="_blank"> <title>vue实现选项卡切换效果</title> <script src="js/jquery-1.8.2.min.js"&g

Vue初识

一.  Vue的简单介绍 前端.django的重点简单描述: """ 1.BBS:前后台不分离的web项目 前台页面主要是通过后台逻辑完成渲染 2.Django:Python Web 框架 HttpResponse | ORM | 模板语言 | Forms | Auth 3.前端:HTML5 CSS3 JavaScript jQuery Bootstrap HTML5:页面架构 CSS3:选择器 样式 布局 JS:ES DOM BOM => 选择器拿到标签,操作标签,标

Vue框架tab切换高亮最简易方法

以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量,再将这个变量和当前index匹配,若true则显示高亮,否则默认样式,代码如下: 如需转载请注明出处:http://www.cnblogs.com/zishang91/p/7580204.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!

Vue学习【第一篇】:Vue初识与指令

什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量到页面一块内容到整个页面,最终大到整个项目,东可以用vue框架来实现 vue可以干哪些事 将数据渲染到指定区域(数据可以是后台获取,也可以由前台自己产生) 可以与页面完成基于数据的交互方式 为什么学习Vue 1.整合了Angular React框架的优点(第一手API文档是中文的) 2.单页面应用(

vue -vantUI tab切换时 list组件不触发load事件解决办法

最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发 解决办法: 初始化定义了list的加载状态 tab切换时:重新初始化一次就行了 这样就解决了tab切换list组件不能再次被触发的问题 原文地址:http

vue.js(17)--vue的组件切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue-i18n实现vue对语言切换,国际化。

1.安装vue-i18n: npm install vue-i18n 如果npm长时间无反应,或安装失败,可以换成淘宝镜像安装: cnpm install vue-i18n 2.在main.js中引用: import VueI18n from 'vue-i18n' Vue.use(VueI18n) 3.在src下新建语言文件: src/locale/language/zh.js src/locale/language/en.js 内容为: en.js zh.js 4.新建一个common组件:

Vue过渡&amp;循环切换&amp;放大缩小动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue过渡与循环切换和放大缩小</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .box { margin-lef