wordpress电影站主题,前端和网站开发的区别,企业运营管理系统,网络技术员工作内容往期内容
《Vue零基础入门教程》第六课#xff1a;基本选项
《Vue零基础入门教程》第八课#xff1a;模板语法
《Vue零基础入门教程》第九课#xff1a;插值语法细节
《Vue零基础入门教程》第十课#xff1a;属性绑定指令
《Vue零基础入门教程》第十一课#xff1a;事… 往期内容
《Vue零基础入门教程》第六课基本选项
《Vue零基础入门教程》第八课模板语法
《Vue零基础入门教程》第九课插值语法细节
《Vue零基础入门教程》第十课属性绑定指令
《Vue零基础入门教程》第十一课事件绑定指令
《Vue零基础入门教程》第十二课双向绑定指令
《Vue零基础入门教程》第十三课条件渲染
《Vue零基础入门教程》第十四课列表渲染
1) 什么是样式绑定
通过绑定class属性 或者 style属性 修改样式
2) 绑定class属性
常见有两种语法
数组写法对象写法
示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/scriptstyle.red {color: red;}.blue {color: skyblue;}/style/headbodydiv idapp!-- 原生的写法 --span classred blue一段文字/span!-- 绑定class属性 -- 对象的写法 --span :classobj对象的写法/span!-- 绑定class属性 -- 数组的写法(推荐) --span :classarr数组的写法/spanspan :classfoo绑定一个变量/spanspan :classflag ? red : blue使用表达式/span/divscriptconst { createApp } Vueconst vm createApp({data() {return {obj: {red: true,blue: true,},arr: [red, blue],foo: red,flag: true,}},}).mount(#app)/script/body
/html
3) 绑定style属性
对象写法
示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodydiv idapp!-- 原生的写法 --div stylefont-size: 32px; color: red原生的写法/div!-- 绑定style属性 -- 对象写法 --div :styleobj对象的写法/div/divscriptconst { createApp } Vueconst vm createApp({data() {return {obj: {// font-size: 32px,fontSize: 32px,color: red,},}},}).mount(#app)/script/body
/html4) 作业 需求 实现京东tab栏切换 参考答案
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- 1.1 引入vue.js --script src../node_modules/vue/dist/vue.global.js/script!-- 2.2 实例静态页面(CSS部分) --style* {margin: 0;padding: 0;}li {list-style: none;}.menu-tab {display: flex;justify-content: space-between;margin: 50px auto;height: 40px;width: 700px;border: 1px solid #eee;border-bottom: 1px solid #e4393c;background-color: #f7f7f7;box-sizing: border-box;}.menu-tab .menu-item {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 14px;color: #666;cursor: pointer;}.menu-tab .menu-item:hover {color: #e4393c;}.menu-tab .menu-item.current {color: #fff;background-color: #e4393c;}/style/headbody!-- 1.2 编写页面容器 --div idapp!-- 2.1 实例静态页面(HTML部分) --ul classmenu-tab!-- liv-for(item, index) in itemsclassmenu-item:classindex active ? current : clickactive index --liv-for(item, index) in itemsclassmenu-item:classindex active ? current : clickhandleClick(index){{item}}/li/ul/div!-- 1.3 创建vue实例对象 --scriptconst { createApp } Vueconst vm createApp({data() {return {items: [商品介绍, 规格与包装, 售后保障, 商品评价(2000), 手机社区],active: 0,}},methods: {handleClick(i) {console.log(i)this.active i},},}).mount(#app)/script/body
/html
