vue学习(五)基础入门-基础知识(9)-JavaScript高阶函数

几种for语法

用的是前面购物车案例的代码

购物车小案例

将普通函数转换成JavaScript高阶函数和

链式编程

箭头函数

表单绑定 v-model

双向绑定的原理

v-model 结合 radio

v-model 结合CheckBox

lable好处就是用户可以点击文字也会选中

v-model :select

v-model双向绑定数组数据时遇到的天坑

<body>
    <div id ="app"> 
        <input type="checkbox" value="篮球"  v-model="hobbies">篮球
        <input type="checkbox" value="羽毛球"  v-model="hobbies">羽毛球
        <input type="checkbox" value="兵乓球"  v-model="hobbies">兵乓球
        <input type="checkbox" value="足球"  v-model="hobbies">足球

        <h2>您的爱好是:{{hobbies}}</h2>

        <label v-for="item in originHobbies" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
        </label>
        
    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            url:'<a href="http://www.baidu.com">百度一下</a>',

            hobbies: [],
            originHobbies:['篮球', '足球', '台球', '高尔夫球', '羽毛球'],
        },
        
        methods: {}
     });
    </script>
</body>

用Chrome浏览器

用360浏览器

查看了几个文档后发现是Chrome不兼容Object.observe

解决方法

  使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。 还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名。

vue中遇到的坑 --- 变化检测问题(数组相关)

深入响应式原理

也就是说,因为360浏览器太老(没有更新)的原因,没有废弃object.server,所以才能够这样用。现阶段只能使用vue.set

修饰符

发布了49 篇原创文章 · 获赞 61 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/wuyxinu/article/details/102917819