20201016冯佳丽

学习日志

部分案例

案例:验证手机号

<div id="app">
            <input type="text" placeholder="手机号" v-model="phone" @blur="vali"/>
            <span :class="{success:success,fail:fail}">{{msg}}</span>
        </div>
            var vm=new Vue({
                el:'#app',
                data:{
                    phone:"",
                    msg:"",
                    success:false,
                    fail:false
                },
                methods:{
                    //验证手机号  正则表达式
                    vali(){
                        console.log(this.phone);
                        var reg = /^1[3-9]\d{9}$/;
                        if(reg.test(this.phone)){
                            this.msg="手机号格式正确";
                            this.success=true;
                            this.fail=false;
                        }else{
                            this.msg="手机号格式不正确";
                            this.success=false;
                            this.fail=true;
                        }
                    }
                }
            })

案例:图片切换

<div id="app">
            <select v-model="src">
                <option value="../img/1.jpg">一</option>
                <option value="../img/2.jpg">二</option>
                <option value="../img/3.jpg">三</option>
                <option value="../img/4.jpg">四</option>
            </select>   
            <img :src="src">
        </div>
// 使用v-model实行选择城市图片,在下拉列表中,有城市的名称,当选择相应的城市后,就显示城市的图片
            new Vue({
                el:"#app",
                data:{
                    src:""
                }
            })

学习感受:

感觉越来越难了。

标签

评论