VUE基础知识5：checkbox

一、安装所用的包

npm install vue axios bootstrap

二、checkbox

如果是复选框，只有一个复选框的时候，会把此值转化为boolean类型，如果true则代表选中。

<input type="checkbox" v-model="a"> {{a}}

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            a: false
        }
    })
</script>

如果是多个checkbox,要增加value属性并且数据类型是数组。

爱好：
<input type="checkbox" v-model="b" value="篮球">篮球
<input type="checkbox" v-model="b" value="足球">足球
<input type="checkbox" v-model="b" value="网球">网球
{{}}


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            b: []
        }
    })
</script>

三、select

原生的获取select的值

<select name="" id="select">
    <option value="1">网球</option>
    <option value="2">足球</option>
    <option value="3">篮球</option>
</select>

<script>
    let oSelect = document.getElementById('select');
    oSelect.onchange = function () {
        alert(thia.value);
    };
</script>

vue中获取select的值。

<div id="app">
<select v-model="a">
    <option value="" disabled>请选择</option>
    <option value="1">网球</option>
    <option value="2">足球</option>
    <option value="3">篮球</option>
</select>
{{a}}
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            a: ''
        }
    })
</script>

如果value属性不写默认取的是option中的值，请选择这一项要加disabled。

如果要让select多选。

<div id="app">
<select v-model="a" multiple>
    <option value="" disabled>请选择</option>
    <option value="1">网球</option>
    <option value="2">足球</option>
    <option value="3">篮球</option>
</select>
{{a}}
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            a: []
        }
    })
</script>

四、radio

<div id="app">
    <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女
    {{gender}}
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            gender: ''
        }
    })
</script>

五、vuetools.crx 是 Chrome 的vue的调试插件。

六、模拟京东写一个购物车

如果一段数据不是标准的JSON格式的字符串，可以在Chrome控制台用 JSON.stringify() 转成标准格式的JSON数据。

JSON.stringify([
                {
                    isSelected: true, // 是否选择
                    productCover: 'xxx',   // 商品封面
                    productName: '深入浅出Node.js',   // 商品名称
                    productInfo: '颜色： Node.js',     // 商品信息
                    productPrice: 57.8,              // 商品价格
                    productCount: 3                  // 商品数量
                }
])

然后再格式化一下。

而且JSON文件里面，也不能写注释。

七、promise-ajax

普通的回调函数这样写

// 普通的回调函数

let a = '';

function buy(callback) {
    setTimeout(() => {
        a = '蘑菇';
        callback(a);
    }, 2000);
}

buy(function cookie(val) {
    console.log(val);
});

promise就是解决回调问题的

promise有三个状态，成功态，失败态，等待

使用promise：

// promise的实例只有一个then方法
// 成功和失败是自己规定的
let p = new Promise((resolve, reject) => {
    setTimeout(function() {
        let a = '蘑菇';
        // 执行成功的方法
        resolve(a);
    }, 2000);
});

// 第一个函数代表成功，第二个函数代表失败
p.then((data)=>{
    console.log(data);
}, (err)=>{
    console.log(err);
});

首先then()方法，必须是实例，才能调用。

封装一个方法：

function buy() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(Math.random() > 0.5) {
                resolve('买');
            } else {
                reject('不买');
            }
        }, Math.random()*1000);
    });
}
buy().then(function (data){
    console.log(data);
}, function(err){
    console.log(err);
});

VUE基础知识5：checkbox

猜你喜欢