<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. MATLAB 2012b license checkout failed

    we offer you two ways to license matlab r2012b: standalone1) choose "install manually without u ...

  2. SpringMVC-2-(Controller)

    一)参数类型 @RequestMapping("hello4") @ResponseBody public ModelAndView Hello4( // Servlet的三个参数 ...

  3. Django & JavaScript 用Ajax实现JSON数据的请求和响应

    [描述] 1.Server端定义了两个字段:Article.title 和 Article.content 2.客户端用JavaScript Ajax异步加载请求服务器的JSON数据 效果是点击按钮从 ...

  4. NEL程序员专用轻钱包 进入0.01状态了

    这个轻钱包能干什么,现在就能在测试网看个余额,转个帐,调用个合约. 而且功能非常程序员化 你会说是不是没啥用   但是他有非常有用,因为他可以很容易的拼出NEOGUI拼不出来的交易 比如参与ICO交易 ...

  5. Android系统API综述

    下述能够找到Android开发源代码: 1. http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.andro ...

  6. 02-Python入门学习-变量

    一.编程语言介绍1.机器语言:直接用二进制编程,直接控制硬件,需要掌握硬件的操作细节优点:执行效率高缺点:开发效率低 2.汇编语言:用英文标签取代二进制指令去编写程序,直接控制硬件,需要掌握硬件的操作 ...

  7. Build Tools

    构建工具能够帮助你创建一个可重复的.可靠的.携带的且不需要手动干预的构建.构建工具是一个可编程的工具,它能够让你以可执行和有序的任务来表达自动化需求.假设你想要编译源代码,将生成的class文件拷贝到 ...

  8. CSS入门介绍(二)CSS选择器

    css选择器 什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: ...

  9. IDEA_构建Maven项目报错(1)

    构建报错: [ERROR] Plugin org.apache.maven.plugins:maven-archetype-plugin:RELEASE or one of its dependenc ...

  10. prometheus + grafana + node_exporter + alertmanager 的安装部署与邮件报警 (一)

    大家一定要先看详细的理论教程,再开始搭建,这样报错后才容易找到突破口 参考文档 https://www.cnblogs.com/afterdawn/p/9020129.html https://www ...