几种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
方法的别名。
也就是说,因为360浏览器太老(没有更新)的原因,没有废弃object.server,所以才能够这样用。现阶段只能使用vue.set
修饰符