vueJS簡單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】

更新時(shí)間：2016年05月03日 17:12:05 投稿：jingxian

下面小編就為大家?guī)硪黄獀ueJS簡單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，一起跟隨小編過來看看吧

目前前端框架太多，接觸過angular、ember，現(xiàn)在開始倒騰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簡單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用live-server快速搭建本地服務(wù)器+自動刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動刷新的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
詳解vue中組件參數(shù)
這篇文章主要介紹了vue中組件參數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07
vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法
今天小編就為大家分享一篇vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁懶加載
下拉框一開始請求第一頁的內(nèi)容,滾動到最后的時(shí)候,請求第二頁的內(nèi)容,如此反復(fù),直到所有數(shù)據(jù)加載完成,這篇文章主要介紹了vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁懶加載,需要的朋友可以參考下
2024-07-07
vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載詳解
這篇文章主要給大家介紹了關(guān)于vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Vue3在css中使用js變量及其原理解讀
這篇文章主要介紹了Vue3在css中使用js變量及其原理解讀,結(jié)合實(shí)例代碼介紹了vue3中css使用script中定義的變量的方法，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-09-09
詳解vue中引入stylus及報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue中引入stylus及報(bào)錯(cuò)解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
vue實(shí)現(xiàn)移動端table表格簡單方法
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)移動端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動應(yīng)用程序時(shí),經(jīng)常需要使用各種UI組件,其中el-table是一個(gè)常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下
2023-09-09
ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04