vue中动态渲染组件

https://blog.csdn.net/qq_42345237/article/details/98348889
https://www.cnblogs.com/moqiutao/p/11440315.html

自己的代码

<template><div class="top"><div class="top_div"><div style="background-color:coral;"><img style="width: 50px;height: 50px" src="../assets/logo.png"></div><div class="top_b" style="background-color:lightblue;"><div v-for='(item,index) in arrl':class='{itemhover:index===isactivel}'@click='lfn(index)'>{{item}}</div></div></div><div id="left"><div class="left_div" style="background-color:coral;">{{arrl[isactivel]}}</div><div class="center_div" style="background-color:lightblue;"><div class="center_div_header"><div v-for='(item,index) in arr[isactivel]':class='{itemhover:index===isactive}'@click='fn(index)'>{{item}}</div></div><div class="center_div_body"><div v-show=show_list[index] v-for='(item,index) in arr[isactivel]':class='{itemdisplay :index===isactive}'><component :is="currentView"></component></div></div></div></div></div></template>
<script>import CommentSetting from './CommentSetting'export default {name: 'ting',table_title: [16, 17, 18, 19],data () {return {itemhoverindex: null,isactive: 0,isactivel: 0,isactivell: 0,arr: [['111','222','333','444'],['222','333','444','555'],['333','444','555','666'],['444','555','666','777']],arrl: ['111','222','333','444'],show_list: [1,0,0,0],cindex:0,table_list:['home','post','archive',"home"],}},methods: {lfn: function (index) {console.log(index)this.show_list=[0,0,0,0]this.show_list[0]=1this.isactive=0this.isactivel = indexthis.cindex=index},fn: function (index) {this.show_list=[0,0,0,0]this.show_list[index]=1this.isactive = index}},components: {'home':CommentSetting,"post":"","archive":""},computed:{currentView(){return this.table_list[this.cindex];}}}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.top {border: 0;display: flex;flex-direction: row;}.top .top_div {border: 0;display: flex;flex-direction: column;}.top .top_div div {width: 150px;height: 50px;}#left {border: 0;display: flex;flex-direction: column;}.top #left .left_div{height:50px;}.top #left .center_div {height: 800px;width: 800px;display: flex;flex-direction: column;}.top #left .center_div .center_div_body {width: auto;height: 800px;}.top #left .center_div .center_div_header {width: auto;display: flex;flex-direction: row;}.top #left .center_div .center_div_header div {width: 80px;background-color: salmon;}.top .top_div .top_b {height: auto;border: 0;display: flex;flex-direction: column;}.top .top_div .top_b div {width: 150px;background-color: darkgray;}.itemhover {background-color: fuchsia !important;color: cornflowerblue !important;height: 50px;}.itemdisplay {display: block;height: 800px;background-color: burlywood;}
</style>

vue中动态渲染组件相关推荐

自己解决在Vue中动态渲染图片不显示的问题
乐于助人前言分析思路 1. 绝对路径 2. 相对路径总结本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题,心里路程比较多,所以话比较多哈哈,感谢阅读,大概耗时2分钟前言如上 ...
Vue中动态渲染输入框并v-model绑定后无法输入
最近遇到一个根据后台返回来动态渲染表单的需求,但是input在v-model后无法输入了. 原因:Vue无法检测普通的新增属性解决:通过this.$set()新增 <el-form :mode ...
vue中动态添加组件
效果: 代码: <template><div><div v-for="(item,index) in lst"><h4>{{item ...
【Vue】动态添加组件的两种实现
在Vue项目中,想要动态为页面上添加组件,是一件十分容易就能够实现的事情,这必须要得益于Vue框架的强力支持! 但有时候往往就是由于事情变得简单起来后,却突然忘记了要如何去实现.这大概就是对代码走火入 ...
VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...

vue中动态渲染组件

vue中动态渲染组件相关推荐

最新文章

热门文章