折800 网站模板,如何搭建网站教程视频,whois 查询系统,免费舆情网站直接打开文章目录 2.6 v-bind2.7 图片轮播案例2.8 v-for2.9 图书管理案例 2.6 v-bind
作用#xff1a;动态设置html的标签属性-src、url、title…语法#xff1a;v-bind:属性名表达式
动态设置img标签的src属性#xff1a;
body
div idapp动态设置html的标签属性-src、url、title…语法v-bind:属性名表达式
动态设置img标签的src属性
body
div idappimg classimage v-bind:srcimgUrl alt图片 /
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {imgUrl: ./images/02.jpg},methods:{}})
/script
/body注意v-bind:src可以简写为:src即v-bind可以省略。 2.7 图片轮播案例
核心思路分析
数组存储图片路径-[图片1, 图片2, 图片3, ...]准备下标index数组[下标] - v-bind设置src展示图片 - 修改下标切换图片
代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappbutton v-showindex0 clickindex--上一页/buttondiv classboximg classimage :srclist[index] alt//divbutton v-showindexlist.length-1 clickindex下一页/button
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {index: 0,list: [./images/01.jpg,./images/02.jpg,./images/03.jpg,./images/04.jpg,]},methods: {}})
/script/body
style.box {border: 1px solid gray;width: 320px;}.image {width: 300px;margin: 10px;}
/style
/html运行效果 涉及的知识点 v-show点击事件数组 2.8 v-for
作用基于数据循环多次渲染整个元素。
适用类型数组、对象、数字。
遍历数组语法v-for(item, index) in 数组item每一项index下标
代码示例
body
div idapph3NBA-太阳队/h3ulli v-for(item, index) in list{{ item }} -- {{ index }}/li/ul
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {list: [Durant, Book, Beal]},methods: {}})
/script
/body运行效果 2.9 图书管理案例
代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idapph3我的书籍/h3el-table:databookListstripeborderstylewidth: 50%el-table-columnpropidlabel书架号width180/el-table-columnel-table-columnpropnamelabel书籍名称width180/el-table-columnel-table-columnpropauthorlabel作者/el-table-columnel-table-columnwidth100label操作template slot-scopescopeel-button sizemini typedanger clickdel(scope.row.id)删除/el-button/template/el-table-column/el-table
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script
!-- 引入样式 --
link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
!-- 引入组件库 --
script srchttps://unpkg.com/element-ui/lib/index.js/script
scriptconst app new Vue({el: #app,data: {bookList: [{id: 1,name: 《长安的荔枝》,author: 马伯庸},{id: 2,name: 《明朝那些事儿》,author: 当年明月},{id: 3,name: 《平凡的世界》,author: 路遥}]},methods: {del(id) {// filter根据条件保留满足条件的对应项// filter不会改变原来的数组而是得到一个新的数组this.bookList this.bookList.filter(item item.id ! id);}}})
/script
/body
/html运行效果 注意 filter的使用。 根据条件保留满足条件的对应项。不会改变原来的数组而是得到一个新的数组 html网页中element-ui前端组件的使用。 引入样式 link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css 引入组件库 script srchttps://unpkg.co
