<template>
<div id="vue_det">
<h1>{{details()}}</h1>
<div>{{ok?'YES':'NO'}}</div>
<div></div>
<vuedemo></vuedemo>
<div>
<ul>
<li v-for="(val, index) in Mobjval" style="min-width:1000px; text-align:left; margin:0 auto;">
<span style="display:inline-block; width:120px;">姓名:{{val.name}}</span>
<span style="display:inline-block; width:230px;">名气:{{val.key}}</span>
<span style="display:inline-block; width:180px;">爱人:{{val.love}}</span>
<span style="display:inline-block; width:100px;">城市:{{val.city}}</span>
<span style="display:inline-block; width:120px;">状态:{{val.staut}}</span>
<span style="display:inline-block; width:120px;">桥接:{{val.tfline}}</span>
<button @click="btnstaute(index)">{{val=val.staut==true ? '隐藏':'显示'}}</button>
<span v-show="val.staut">显示当前行</span>
<span>index:{{index+1}}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
import vuedemo from './vuedemo'
export default {
name: 'vue_det',
components: {
vuedemo
},
data () {
return {
site: '菜鸟教程',
ok: false,
Mobjval: [
{name: '张国荣',
key: Math.random(),
love: '最爱梅艳芳',
city: '香港',
staut: false
}, {name: '胡歌',
key: Math.random(),
love: '最爱刘亦菲',
city: '上海',
staut: false
}, {name: '成龙',
key: Math.random(),
love: '最爱花心萝卜头',
city: '香港',
staut: false
}
],
arrays: []
}
},
created () {
for (let i in this.Mobjval) {
this.arrays.push({
'name': this.Mobjval[i].name,
'key': this.Mobjval[i].key,
'love': this.Mobjval[i].love,
'city': this.Mobjval[i].city,
'staut': this.Mobjval[i].staut,
'tfline': true
})
}
this.Mobjval = this.arrays
},
methods: {
details () {
return this.site + '- 学的不仅是技术,更是梦想!'
},
btnstaute (index) {
// this.Mobjval.staut = !this.Mobjval.staut
// console.log(this.Mobjval.staut)i i
console.log(index, '当前数据')
console.log(this.arrays, '这是数组重组')
const tf = this.Mobjval[index].tfline
const fa = this.Mobjval[index].staut
if (tf !== fa) {
for (let i in this.Mobjval) {
this.Mobjval[i].staut = false
}
}
this.Mobjval[index].staut = !this.Mobjval[index].staut
// this.Mobjval[index].staut = true
// this.Mobjval[index].staut = !this.Mobjval[index].staut
console.log(this.Mobjval[index].staut)
}
}
}
</script>
<style>
</style>
觉得有用,打个赏吧(* ̄︶ ̄)

vue评论显示隐藏,JavaScript显示关闭的更多相关文章

  1. DJango xadmin 表头和标底设置,显示隐藏和显示

    xadmin文件中的xadmin.pyfrom xadmin import views class GlobalSetting(object): site_title = "zwb" ...

  2. 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏

    项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...

  3. 如何写javascript代码隐藏和显示这个div

    如何写javascript代码隐藏和显示这个div 浏览次数:82次悬赏分:10 | 解决时间:2011-4-21 14:41 | 提问者:hade_girl <div id="div ...

  4. Vue实现二级菜单的显示与隐藏

    <html> <head> <title>Vue实现二级菜单的显示与隐藏</title> <script src="vue.js&quo ...

  5. vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  6. vue实现 toggle显示隐藏效果

    背景介绍jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?使用场景常见有三种场景:1.控制页面中一个dom元素2.控制页面中多个dom ...

  7. python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  8. javascript进行百度换肤 和显示隐藏一个窗口的操作

    简单的运用javascript来进行百度换肤的操作 <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. Vue 使用Spread.js没有层级关系(隐藏与显示)

    Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题

  10. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

随机推荐

  1. Mybatis内批量插入Oracle

    <insert id="insertManagerInfoBatch" parameterType="java.util.List"> <se ...

  2. thinkphp的静态缓存,数据缓存,快速缓存,查询缓存

    // 静态缓存 // 'HTML_PATH' 缓存目录,这是个常量不是配置项,在入口文件中定义 // 'HTML_CACHE_ON'     =>    true, // 开启静态缓存 'HTM ...

  3. KaliLinuxNetHunter教程实施刷机解锁Bootloader

    KaliLinuxNetHunter教程实施刷机解锁Bootloader 当用户将前面的工作都准备完成后,即可开始刷机.其中,整个刷机过程分为三个步骤,分别是解锁Bootloader.刷入第三方Rec ...

  4. Git Sever搭建与相关错误处理

    搭建 安装git: sudo apt-get install git 创建一个git用户,用来运行git服务:(用自己的用户也可以,其实) sudo adduser git 创建证书登录: 收集所有需 ...

  5. jmeter基本组成原件介绍

    jmeter基本组成原件介绍 参考地址:https://wenku.baidu.com/view/d4986ca2aaea998fcc220ec1.html 从性能工具的原理划分: Jmeter工具和 ...

  6. h5 canvas与SVG的比较

    画布 什么是canvas? HTML5的canvas标签使用JavaScript可以在网页上绘制图像,画布为一个矩形. 画布本身没有绘制能力,只能通过脚本来绘制. 画布例子: <canvas i ...

  7. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

  8. [LeetCode] Design Linked List 设计链表

    Design your implementation of the linked list. You can choose to use the singly linked list or the d ...

  9. 听说尤雨溪在开发vue4.0?是谁煽动了前端圈的焦虑情绪

    导火索因P图而起 今天前端圈里被一张P图搞得好热闹,最初只是QQ群里一个冒名尤雨溪的前端网友发了一句调侃的话,原话截图如下: 看完觉得好搞笑,说尤雨溪在开发vue4.0,有谁学不动了,就给他发10块钱 ...

  10. SPARK-18560

    ##### Receiver data can not be dataSerialized properly. ``` // :: ERROR executor.Executor: Exception ...