没有合适的资源?快使用搜索试试~ 我知道了~
Vue快速入门(二).doc
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 2 浏览量
2022-07-09
20:25:54
上传
评论
收藏 1.66MB DOC 举报
温馨提示
试读
26页
Vue快速入门(二).doc
资源推荐
资源详情
资源评论
Vue 快速入门(二)
本文总结:条件渲染、列表渲染(v-for)、什么时候数据才会更新,数组更新与检
测都包括哪几种方法?,数据双向绑定(v-model),事件处理,表单控制,v-model 之 lazy、
number、trim,需要拿走~
目录 Vue 快速入门(二)class 、style 三种绑定方式条件渲染列表渲染 v-for 遍历数组(列
表)、对象(字典)、数字遍历对象遍历数组遍历数字 key 值 的解释数组更新与检测可以检测
到变动的数组操作:检测不到变动的数组操作:解决方法:数据双向绑定事件处理过滤案例
事件修饰符按键修饰符表单控制 checkbox 单选 checkbox 多选 radio 单选总结 v-model 进阶
v-model 之 lazy、number、trim
Vue 快速入门(二)
class 、style 三种绑定方式
标签的 class 和 style 都有以下三种绑定方式
字符串、数组、自定义对象(字典)
注意:class 推荐使用数组,style 推荐使用自定义对象
.color{
background: tomato;
}
.font{
text-align: center;
}
我是 h1 标签
var vm = new Vue({
el: ‘#app’,
data: {
//字符串类型
// h1_class: “color font”
// 数组(推荐)
// h1_class:[‘color’,’font’]
//自定义对象
//h1_class:{‘color’:true,’font’:true}
//字符串类型
//h1_style:”background: tomato”
//数组类型
//h1_style:[{background:’tomato’},{fontSize:’100px’}]
//自定义对象类型
h1_style:{background:’green’,fontSize:’100px’}
}
})
控制台验证
条件渲染
指令
释义
v-if
相当于: if
v-else
相当于:else
v-else-if
相当于:else if
h1{
text-align: center;
background: tomato;
}
p{
font-size: 48px;
text-align: center;
}
成绩等级
90”>优秀
80”>良好
60”>及格
不及格
var vm = new Vue({
el:’#app’,
data:{
score:100,
}
})
列表渲染
使用 v-for 和 v-if 控制列表渲染
0” >
商品名称
价格
{{ good.name }}
{{ good.price }}
购物车为空
var vm = new Vue({
el: ‘#app’,
data: {
goods_list: [{name: ‘白菜’, price: 70}, {name: ‘鸡蛋’, price: 60}]
}
})
剩余25页未读,继续阅读
资源评论
书博教育
- 粉丝: 1
- 资源: 2835
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功