2017-4-1 VUE

JS的方法

1、类型判断的方法

/*
*判断变量val是不是整数类型
*/
function isNumber(val) {
    return typeof val === 'number' && isFinite(val);
}

/*
*判断变量val是不是布尔类型
*/
function isBoolean(val) {
    return typeof val === 'boolean';
}

/*
*判断变量val是不是字符串类型
*/
function isString (val) {
    return typeof val === 'string';
}

/*
*判断变量val是不是undefined
*/
function isUndefined(val) {
    return typeof val === 'undefined';
}

/*
*判断变量val是不是对象
*/
function isObj(str) {
    if (str===null||typeof  str==='undefined') {
        return false;
    }
    return typeof str === 'object';
}

/*
*判断变量val是不是null
*/
function isNull(val) {
    return val === null;
}

/*
*判断变量arr是不是数组
*方法一
*/
function isArray1(arr) {
    return Object.prototype.toString.apply(arr) === '[object Array]';
}

/*
*判断变量arr是不是数组
*方法二
*/
function isArray2(arr) {
    if (arr === null || typeof arr === 'undefined') {
        return false;
    }
    return arr.constructor === Array;
}

2、创建对象构造函数

//创建一个简单对象字面量
var person = {};    

// 加入属性和方法
person.name = 'ifcode';
person.setName = function(theName) {
   person.name = theName;
}

var person = {
    name: 'ifcode',
    setName: function(theName) {
        this.name = theName;
    }
}

Person = function(defaultName) {
    this.name = defaultName;
    this.setName = function(theName) {
        this.name = theName;
    }
}
person = new Person('ifcode');


Person = function(defaultName) {
    this.name = defaultName;
}

Person.prototype.setName = function(theName) {
    this.name = theName;
}

3、JS基础函数和语法

值类型:String,Number,Boolean,Null,Object,Function
字符型转换成数值型:parseInt(),parseFloat()
数字转换成字符型:(""+变量)
取字符串长度是:(length)
字符与字符相连接使用+号.
判断语句结构:if(condition){}else{}
循环结构:for([initial e­xPRession];[condition];[upadte e­xpression]) {inside loop}
循环中止的命令是:break
当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
弹出提示信息:window.alert("字符");
弹出确认框:window.confirm();
弹出输入提示框:window.prompt();
指定当前显示链接的位置:window.location.href="URL"
取出窗体中的所有表单的数量:document.forms.length
关闭文档的输出流:document.close();
字符串追加连接符:+=
字符串的定义:var myString = new String("This is lightsWord");
字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到.
取字符串中指定位置的一个字符:StringA.charAt(9);
取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n+1))返回随机数
length取得长度,返回整型数值
addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
window.focus()使当前的窗口在所有窗口之前.
blur()指失去焦点.与FOCUS()相反.
select()指元素为选中状态.
lastIndexOf(searchString[,startIndex])最后一次出现的位置.
match(regExpression),判断字符是否匹配.
replace(regExpression,replaceString)替换现有字符串.
split(分隔符)返回一个数组存储值.
substr(start[,length])取从第几位到指定长度的字符串.
toLowerCase()使字符串全部变为小写.
toUpperCase()使全部字符变为大写.
parseInt(string[,radix(代表进制)])强制转换成整型.
parseFloat(string[,radix])强制转换成浮点型.
isNaN(变量):测试是否为数值型.

<div id="demo">
            <a v-on:click="tog" class="list-group-item active">商品总金额：{{total}}</a>
            <div v-if="show">
                <div v-for="food in foods">
                    <a v-on:click="add(food)" class="list-group-item">
                        {{food.name}}
                        <span class="label label-default" >${{food.price}}</span>
                    </a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload=function(){
        var data={
            show:true,
            total:0,
            foods:[
                {
                name:"苹果",
                price:10,
                statue:false,
                style:"",
                },
                {
                name:"香蕉",
                price:15,
                statue:false,
                style:"",                
                },
                {
                name:"哈密瓜",
                price:26,    
                statue:false,
                style:"",            
                },
                {
                name:"火龙果",
                price:30,
                statue:false,
                style:"",                
                }
            ]
        }
        var vm=new Vue({
            el:"#demo",
            data:data,
            methods:{
                tog:function(){
                    this.show=!this.show;    
                },
                add:function(food){
                    if (food.statue){
                        this.total-=food.price;    
                        food.statue=false;
                        food.style="";
                    }else{
                        this.total+=food.price;    
                        food.statue=true;
                        food.style="act";
                    }
                }
            }
        })
    }
</script>