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

最新推荐文章于 2022-09-14 23:12:25 发布

wuyxinu

最新推荐文章于 2022-09-14 23:12:25 发布

阅读量341

点赞数

分类专栏： Web前端 Vue

本文链接：https://blog.csdn.net/wuyxinu/article/details/102917819

版权

Web前端同时被 2 个专栏收录

47 篇文章 47 订阅

订阅专栏

Vue

40 篇文章 55 订阅

订阅专栏

几种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

修饰符

wuyxinu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue学习(五)基础入门-基础知识(9)-JavaScript高阶函数

几种for语法用的是前面购物车案例的代码购物车小案例将普通函数转换成JavaScript高阶函数和链式编程箭头函数表单绑定 v-model双向绑定的原理v-model 结合 radiov-model 结合CheckBoxlable好处就是用户可以点击文字也会选中v-model...
复制链接

扫一扫

专栏目录