学习日志

部分案例

案例：验证手机号

<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:""
                }
            })

学习感受：

感觉越来越难了。