简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-16 15:02:29
Original
1690 Leute haben es durchsucht

目前前端框架太多，接触过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>
Nach dem Login kopieren

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

Verwandte Etiketten：
js vue 隐藏
Quelle：php.cn
Vorheriger Artikel：JavaScript作用域和作用域链 Nächster Artikel：基于Bootstrap使用jQuery实现简单可编辑表格_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Vue 3 und Vuetify 3 greifen auf SCSS/SASS-Variablen in Komponenten zu Ich möchte vordefinierte Variablen in meiner Vue3-Komponente verwenden. <template>&l...
Aus 2023-11-17 13:52:29
0
1
293
Das Modul ist im Vue-Projekt nicht definiert Ich habe gerade eine neue Vue-Anwendung erstellt, indem ich npmini tvue@latest ausgeführt ...
Aus 2023-11-17 12:38:53
0
2
394
Felder von Objekten im Formular validieren – Vue 3 + Vee-validieren + Ja Ich habe ein Formular, in dem sich einige Felder innerhalb eines Objekts befinden: <scr...
Aus 2023-11-16 13:56:09
0
1
169
Vue 3 importiert dynamisch basierend auf Requisiten Ich verwende unplugin-icon, um eine Symbolkomponente zu erstellen. Normalerweise kann ich ...
Aus 2023-11-16 11:40:01
0
1
235
Vue 3 Composition API – Schaltfläche zum Senden des Formulars deaktivieren, bis alle Bedingungen erfüllt sind Ich möchte die Schaltfläche zum Senden des Formulars deaktivieren, bis alle Eingabefelder ...
Aus 2023-11-13 09:41:53
0
3
438
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！