简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

vueJS简单的点击显示与隐藏的效果【实现代码】_javascript技巧

WBOY
发布： 2016-05-16 15:02:29
原创
1691 人浏览过

目前前端框架太多，接触过angular、ember，现在开始倒腾vue

此处用到v-if、v-else、v-show，v-if或让元素不在DOM上，v-show只是改变display:block属性，感觉v-if好

感觉跟适合、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if、v-else、v-show</title>
  <script src="../js/vue.js"></script>
  <!--copy from http://vuejs.org.cn/guide/-->
</head>
<body>
  <div id="app">
    <p v-if="willShow">显示显示显示</p>
    <p v-else>隐藏隐藏隐藏隐藏</p>
    <button @click="fn()">改变</button>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        willShow:true
      },
      methods:{
        fn:function(){
          if(this.willShow==true){
            this.willShow=false;
          }else{
            this.willShow=true
          }
        }
      }
    });
  </script>
</body>
</html>
登录后复制

以上这篇vueJS简单的点击显示与隐藏的效果【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

相关标签：
js vue 隐藏
来源：php.cn
上一篇：JavaScript作用域和作用域链 下一篇：基于Bootstrap使用jQuery实现简单可编辑表格_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Vue 3 和 Vuetify 3 访问组件中的 SCSS/SASS 变量 我想在我的Vue3组件中使用预定义变量。<template><divclass="roundedimg-container"><s...
来自于 2023-11-17 13:52:29
0
1
293
Vue项目中未定义模块 我刚刚通过运行npmini tvue@latest创建了一个新的Vue应用程序，如官方文档中指定的那样。然后我尝试按照Vue和Vite网站上的指南将Tailwind添加到我的应用程...
来自于 2023-11-17 12:38:53
0
2
394
验证表单中对象的字段 - Vue 3 + Vee-validate + 是的 我有一个表单，其中某些字段位于对象内：<scriptsetuplang="ts">...constschema:yup.SchemaOf<an...
来自于 2023-11-16 13:56:09
0
1
169
Vue 3 基于 Props 动态导入 我正在使用unplugin-icon创建一个图标组件，通常情况下我可以导入例如//scriptimportIconCopyfrom'~icons/prime/copy'//temp...
来自于 2023-11-16 11:40:01
0
1
235
Vue 3 Composition API - 禁用表单提交按钮，直到满足所有条件 我想禁用表单提交按钮，直到所有输入字段均已填写并且没有错误。<button:disabled="disabled"type="submit&qu...
来自于 2023-11-13 09:41:53
0
3
438
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！