1、v-on起步练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>V-on起步</title>
        <!-- 通过CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- Vue-app的根容器 -->
        <div id="app">
            <button type="button" @click="handleClick">点我</button>
        </div>
        <script type="text/javascript">
            // 实例化一个Vue对象
            var app=new Vue({
                el:'#app',
                data:{
                    name: '软件1721',
                },
                methods: {
                    handleClick:function(){
                        alert(this.name);
                    }
                }
            })
        </script>
    </body>
</html>

运行结果：

运行结果

2、V-on练习2-隐藏和显示的切换练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>V-on练习2-隐藏和显示的切换练习</title>
        <!-- 通过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" @click="handleClick">隐藏/显示</button>
            
        </div>
        <script type="text/javascript">
            // 实例化一个Vue对象
            var app=new Vue({
                el:'#app',
                data:{
                    show:true,
                    name: '软件1721',
                },
                methods: {
                    handleClick:function(){
                        // 把当前show属性的值取反
                        /* if (this.show === true) {
                            this.show=false;
                        } else{
                            this.show=true;
                        } */
                        this.show=!this.show
                    }
                }
            })
        </script>
    </body>
</html>

运行结果：

运行结果

3、V-on练习3-年龄的加减

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>V-on练习3-年龄的加减</title>
        <!-- 通过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" @click="add">加一岁</button>
            <button type="button" @click="substract(5)">减五岁</button>
        </div>
        <script type="text/javascript">
            // 实例化一个Vue对象
            var app=new Vue({
                el:'#app',
                data:{
                    age:30
                },
                methods: {
                    add: function(){
                        this.age += 1;
                    },
                    substract: function(num){
                        // 判断当前年龄是否够减
                        if (this.age -num<0) {
                            alert('不够减了')
                        } else{
                            this.age -= num;
                        }
                        
                    }
                }
            })
        </script>
    </body>
</html>

运行结果：

运行结果

4、V-on练习4-结合图标关注和取关的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>V-on练习4-结合图标关注和取关的练习</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"/>
    </head>
    <style type="text/css">
        .followed{
            color: darkgrey;
        }
        .link{
            cursor: pointer;
        }
        .cancle-followed{
            color: #008000;
        }
    </style>
    <body>
        <!-- Vue-app的根容器 -->
        <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">
            // 实例化一个Vue对象
            var app=new Vue({
                el:'#app',
                data: {
                    name: '简书作者',
                    followed:false
                },
                methods: {
                    handleFollow: function(){
                      this.followed=!this.followed;
                    }
                    
                        
                    }
                
            })
        </script>
    </body>
</html>

运行结果：