4滓技、方法

今天學(xué)習(xí)methods屬性, 這個(gè)名字是固定的哩牍,它是一個(gè)對(duì)象,用于存儲(chǔ)各種方法令漂。{{方法名()}}就可以調(diào)用相應(yīng)的方法膝昆。

使用method方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>{{greeting('afternoon')}}</h2>
            <h2>{{message}}</h2>                    
        </div>
        <script type="text/javascript">
            //實(shí)例化一個(gè)vue對(duì)象
            var app = new Vue({
                el: '#app',
                data:{
                    message:' hello Vue',               
                },
                methods:{
                    greeting:function(time){
                        return 'Good' + time+'!';
                    }
                }
            })
        </script>
    </body>
</html>

運(yùn)行結(jié)果:


image.png

使用v-on指令調(diào)用方法

  • 分別點(diǎn)擊“隱藏/顯示”按鈕可以切換內(nèi)容的顯示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 通過(guò)cdn引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- vue-app根容器 -->
        <div id="app">
            <h2 v-if="show">{{name}}</h2>
            <button type="button" v-on:click="handClick">隱藏/顯示</button>
            

        </div>
        <script type="text/javascript">
            //實(shí)例化一個(gè)vue對(duì)象
            var app = new Vue({
                el: '#app',
                data:{
                    name:'2019',
                    show:true
                },
                methods:{
                    handClick:function(){
                        // 把當(dāng)前的show屬性相反
                        this.show=!this.show;
                    }
                }
            })
        </script>
        
    </body>
</html>

關(guān)注/取消關(guān)注練習(xí)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 通過(guò)cdn引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
        <style type="text/css">
            .follow{
                color:#DDD;
            }
            .cancle-follow{
                color:#008000;
            }
            .link{
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <!-- vue-app根容器 -->
        <div id="app">
            <h2>{{name}}</h2>
            <p class="follow link" v-show="followed" v-on:click="handfollow">
                <i class="icon-ok"></i>已關(guān)注</p>
            <p class="cancle-follow link" v-show="followed===false" 
             v-on:click="handfollow"><i class="icon-plus"></i>關(guān)注</p>
            

        </div>
        <script type="text/javascript">
            //實(shí)例化一個(gè)vue對(duì)象
            var app = new Vue({
                el: '#app',
                data:{
                    name:'簡(jiǎn)書(shū)作者',
                    followed:false
                    
                },
                methods:{
                    handfollow:function(followed){
                        this.followed=!this.followed;
                    }
                }
                
            })
        </script>
        
    </body>
</html>

年齡的增減練習(xí)

單擊“長(zhǎng)一歲”可以使得age的值加1,單擊“減五歲”可以使得age的值減5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 通過(guò)cdn引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- vue-app根容器 -->
        <div id="app">
            <h2>{{age}}</h2>
            <button type="button" v-on:click="add">加一歲</button>
            <button type="button" v-on:click="substrct(5)">減5歲</button>

        </div>
        <script type="text/javascript">
            //實(shí)例化一個(gè)vue對(duì)象
            var app = new Vue({
                el: '#app',
                data:{
                    age:30
                    
                },
                methods:{
                    add:function(){
                        this.age += 1;
                    },
                    substrct:function(num){
                        this.age -= num;
                    }
                }
            })
        </script>
        
    </body>
</html>

大體效果:


image.png

關(guān)注和加減的綜合訓(xùn)練:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 通過(guò)cdn引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
        <style type="text/css">
            

            .btn {
                color: red;
            }

            .link {
                cursor: pointer;
            }
            .zan{
                display:flex;
                
            }
            .btn{
                width:100px;
                height:35px;
                border-radius: 20px;
                background-color:#FFF;
                
                border:1px solid rgb(236, 97, 73);
                outline:none;
            }
        </style>
    </head>
    <body>
        <!-- vue-app根容器 -->
        <div id="app">
            <div class="zan">
                
                
                <button class="btn link" v-show="followed" 
                v-on:click="handfollow" v-on:click="handfollow"><i class="icon-heart"></i>喜歡 |{{age}} </button>
                
                <button class="btn link" v-show="followed===false" v-on:click="handfollow">
                    <i class="icon-heart-empty"></i>喜歡 {{age}} </button>
            
            </div>

        </div>
        <script type="text/javascript">
            //實(shí)例化一個(gè)vue對(duì)象
            var app = new Vue({
                el: '#app',
                data: {
                    age: 12,
                    followed: false

                },
                methods: {
                    handfollow: function(followed) {
                        this.followed = !this.followed;
                        if(this.followed==true){
                            this.age+=1;
                        }
                        else{
                            this.age-=1;
                        }
                    }
                    
                }

            })
        </script>

    </body>
</html>

大體效果


image.png

可以點(diǎn)擊按鈕來(lái)喜歡或取消喜歡洗显,同時(shí)后面數(shù)字也會(huì)隨之改變外潜。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市挠唆,隨后出現(xiàn)的幾起案子处窥,更是在濱河造成了極大的恐慌,老刑警劉巖玄组,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件滔驾,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡俄讹,警方通過(guò)查閱死者的電腦和手機(jī)哆致,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)患膛,“玉大人摊阀,你說(shuō)我怎么就攤上這事。” “怎么了胞此?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵臣咖,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我漱牵,道長(zhǎng)夺蛇,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任酣胀,我火速辦了婚禮刁赦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘闻镶。我一直安慰自己甚脉,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布儒溉。 她就那樣靜靜地躺著宦焦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪顿涣。 梳的紋絲不亂的頭發(fā)上波闹,一...
    開(kāi)封第一講書(shū)人閱讀 51,370評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音涛碑,去河邊找鬼精堕。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蒲障,可吹牛的內(nèi)容都是我干的歹篓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼揉阎,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼庄撮!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起毙籽,我...
    開(kāi)封第一講書(shū)人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤洞斯,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后坑赡,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體烙如,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年毅否,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了亚铁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡螟加,死狀恐怖徘溢,靈堂內(nèi)的尸體忽然破棺而出吞琐,到底是詐尸還是另有隱情,我是刑警寧澤然爆,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布顽分,位于F島的核電站,受9級(jí)特大地震影響施蜜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜雌隅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一翻默、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恰起,春花似錦修械、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至吨枉,卻和暖如春蹦渣,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背貌亭。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工柬唯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人圃庭。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓锄奢,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親剧腻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子拘央,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 這節(jié)我們主要學(xué)習(xí)methods屬性, 這個(gè)名字是固定的,它是一個(gè)對(duì)象书在,用于存儲(chǔ)各種方法灰伟。{{方法名()}}就可以調(diào)...
    陶然然_niit閱讀 369評(píng)論 0 1
  • 前言:我是參考 南峰子 的博客加上自己理解寫(xiě)的,原著專(zhuān)輯大家自己可看:http://southpeak.githu...
    Chendy_Linda閱讀 298評(píng)論 0 1
  • 一蕊温、方法入門(mén)知識(shí) 定義格式: 調(diào)用格式:methodName(); 注意事項(xiàng):方法定義的先后順序無(wú)所謂袱箱。方法定義必...
    哈哈大圣閱讀 293評(píng)論 0 0
  • 方法引用可以讓我們的表達(dá)式更加簡(jiǎn)潔舉個(gè)例子: 1. 方法引用 我們?cè)谏弦还?jié)有這么一種寫(xiě)法 箭頭函數(shù)左邊是匿名函數(shù)的...
    HmilyMing閱讀 288評(píng)論 0 0
  • 一,方法 面向過(guò)程的語(yǔ)言中义矛,成為函數(shù) 面向?qū)ο蟮恼Z(yǔ)言中发笔,稱(chēng)為方法 通過(guò)方法,可以對(duì)特定功能的代碼進(jìn)行封裝凉翻,實(shí)現(xiàn)代碼...
    你來(lái)聽(tīng)我說(shuō)閱讀 262評(píng)論 0 0