四. v-on指令

weixin_33806914發表於2019-03-10

訊息彈框

語法糖：v-on:click 簡寫成@click

<!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">
            <button type="button" @click="handleClick">點我</button>
            <!-- <button type="button" v-on:click="handleClick">點我</button> -->
        </div>
        
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    name:'軟體1721',
                },
                
                methods:{
                    handleClick:function(){
                        alert(this.name);
                    }
                }
            })
        </script>
    </body>
</html>

關注取消

應用v-if 當前值的取反（註釋掉的部分易於理解）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>隱藏和顯示切換練習</title>
        <!-- 通過CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h2 v-if="show">{{name}}</h2>
            <button type="button" @click="handleClick">隱藏/顯示</button>
            <!-- <button type="button" v-on:click="handleClick">點我</button> -->
        </div>
        
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    name:'軟體1721',
                    show:true,
                },
                methods:{
                    handleClick:function(){
                        //把當前值取反
                        /* if(this.show === true){
                            this.show = false;
                        }else{
                            this.show = true;
                        } */
                        this.show = !this.show;
                    }
                }
            })
        </script>
    </body>
</html>

年齡增減練習

methods中寫方法，在按鈕中呼叫

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>年齡加減</title>
        <!-- 通過CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <style type="text/css">
        
    </style>
    <body>
        <div id="app">
            <h2 v-if="true">{{age}}</h2>
            
            <button type="button" @click="handclick">加一歲</button>
            
            <button type="button" @click="dissclick">減五歲</button>
        </div>
        
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    age: 17
                },
                
                methods: {
                    handclick: function() {
                        this.age += 1
                    },
                    
                    dissclick: function() {
                        if (this.age - 5 > -1) {
                            this.age -= 5
                        } else {
                            alert("年齡不能小於0")
                        }
                    }
                    
                }
            })
        </script>
    </body>
</html>

關注與取消關注

關注與取消關注練習，是頻繁的操作，所以要採用v-show
(需要css font 引入圖示）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>關注取消練習</title>
        <!-- 通過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">
            .follwed{
                color: #666666;
            }
            .cancle{
                color: #008000;
            }
            .link{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2>{{name}}</h2>
            <span class="follwed link" v-show="followed" @click="handclick">
                <i class="icon-ok"></i>已關注
            </span>
            <span class="cancle link" v-show="followed===false" @click="handclick">
                <i class="icon-plus"></i>關注
            </span>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    name:'櫻花樹下的約定',
                    followed:true
                },
                
                methods: {
                    handclick:function(){
                        this.followed=!this.followed
                    }
                    },
                
                }
            )
        </script>
    </body>
</html>

相關文章