vueJS簡單的點擊顯示與隱藏的效果【實現(xiàn)代碼】
更新時間：2016年05月03日 17:12:05 投稿：jingxian
下面小編就為大家?guī)硪黄獀ueJS簡單的點擊顯示與隱藏的效果【實現(xiàn)代碼】。小編覺得挺不錯的，現(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簡單的點擊顯示與隱藏的效果【實現(xiàn)代碼】就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解element-ui中el-select的默認(rèn)選擇項問題
這篇文章主要介紹了詳解element-ui中el-select的默認(rèn)選擇項問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)對某個區(qū)域繪制水印，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue實現(xiàn)前端頁面緩存的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在Vue3中,公共組件的main.js文件扮演著非常重要的角色,它的作用主要體現(xiàn)在：注冊全局組件、引入公共樣式、引入Vue、引入組件、創(chuàng)建Vue實例、掛載實例,本文將圍繞Vue3公共組件的main.js文件進行詳細(xì)的闡述,包括其作用、常用代碼等方面2023-08-08
這篇文章主要介紹了vue項目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
本篇介紹directive的簡單實現(xiàn)，主要學(xué)習(xí)其實現(xiàn)的思路及代碼的設(shè)計，需要的朋友參考下吧2018-01-01
最近的項目有一個加載遠(yuǎn)程組件的需求，基于此我對 Vue 加載遠(yuǎn)程組件的方案進行了研究，并且整理了兩個可行的解決方案，有感興趣的小伙伴跟著小編一起來看看吧2023-07-07
VUE3.2項目使用Echarts5.4詳細(xì)步驟總結(jié)
Vue3.2是一款非常流行的JavaScript框架,它讓在前端領(lǐng)域開發(fā)變得更加的便捷,下面這篇文章主要給大家介紹了關(guān)于VUE3.2項目使用Echarts5.4的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了Ant Design封裝年份選擇組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
使用vite搭建ssr活動頁架構(gòu)的實現(xiàn)
本文主要介紹了使用vite搭建ssr活動頁架構(gòu)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07