弹窗事件

<body>
        <div id="app">
            <button type="button" v-on:click='handleClick'>click</button>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    name: '张三'
                },
                methods:{
                    handleClick:function(){
                        alert(this.name);
                    }
                }
            })
        </script>
    </body>

将handleClick方法用v-on:click指令和按钮button绑定,当点击click时弹出窗口显示"张三"

隐藏/显示切换属性

<body>
        <div id="app">
            <h2 v-if="show">{{name}}</h2>
            <button type="button" @click='handleClick'>隐藏/显示</button>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    name: '张三',
                    show: true
                },
                methods:{
                    handleClick:function(){
                        this.show = ! this.show;
                    }
                }
            })
        </script>
    </body>

v-on:同等与@;当属性show显示true时,v-if渲染<h2>中属性,当点击按钮时this.show取非true成为false,<h2>中属性就会隐藏

年龄加减

<body>
        <div id="app">
            <h2>{{age}}</h2>
            <button type="button" @click='add'>加一岁</button>
            <button type="button" @click="substrct(5)">减5岁</button>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    age: 30
                },
                methods:{
                    add:function(){
                        this.age + = 1;
                    },
                    substrct:function(num){
                        if(this.age - num < 0){
                            alert('小于零岁了');
                        }else{
                            this.age - = num;
                        }
                    }
                }
            })
        </script>
    </body>

点击"加一岁"实现add方法实现自己1;点击"减5岁"实现substrct方法实现自减,substrct中的函数为几就自减几

关注和取消关注练习

<body>
        <div id="app">
            <h2>{{name}}</h2>
            <span class="followed link" v-show="followed" @click="handleFollow">
                <i class="icon-ok"></i>已关注
            </span>
            <span class="cancle-followed link" v-show="followed===false" @click="handleFollow">
                <i class="icon-plus"></i>关注
            </span>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    name: '简书作者',
                    followed: false
                },
                methods:{
                    handleFollow:function(){
                        this.followed = !  this.followed;
                    }
                }
            })
        </script>
    </body>

<i>为图标字体,可以在其中查找自身所需的图标和字体，followed为false时,v-show渲染选择器名为"cancle-followed link"的行内标签,点击之后触发handleFollow方法this.followed取非，v-show渲染名为"followed link"的行内标签