Vue指令(下)

大号在练葵花宝典  论坛元老 | 2025-1-10 07:47:02 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1026|帖子 1026|积分 3078

Vue指令(下)

参考文献：
Vue的快速上手
Vue指令上

  
          
博客主页: He guolin-CSDN博客

       
关注我一起学习，一起进步，一起探索编程的无穷大概吧！让我们一起努力，一起发展！
      嗨！收到一张超美的图，  愿你天天都能顺心！  

v-bind

1.作用：动态的设置html的标签属性 -> src,url,title等等
2.语法：v-bind:属性名=“表达式”(注:也可以直接简写成:属性名=“表达式”)
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div id="app">
  12.         <img :src="imgUrl" alt="">
  13.     </div>
  14.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  15.     <script>
  16.         const app = new Vue({
  17.             el: "#app",
  18.             data: {
  19.                 imgUrl:'./img/1.png'//切换成你的图片真实地址
  20.             }
  21.         })
  22.     </script>
  23. </body>
  25. </html>
复制代码
这串代码用于动态的设置我们的图片的地址
v-bind小案例

接下来我们对上述讲过的vue指令做一个小案例。
起首我们准备了六张图片，在页面中只展示一张图片，通过点击上一页或者下一页来切换图片。
焦点思路分析：
1.数组存储图片路径->[图片1，图片2，图片3,…]
2.准备下标index，数组[下标] -> v-bind设置src展示图片 -> 修改下标切换图片
接下来来看代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div id="app">
  12.         <button v-show="index > 0" @click="index--">上一页</button>
  13.         <div>
  14.             <img :src="list[index]" alt="">
  15.         </div>
  16.         <button v-show="index < list.length - 1" @click="index++">下一页</button>
  17.     </div>
  18.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  19.     <script>
  20.         const app = new Vue({
  21.             el: "#app",
  22.             data: {
  23.                 index:0,
  24.                 list:[
  25.                     './picture/1.png',
  26.                     './picture/2.png',
  27.                     './picture/3.png',
  28.                     './picture/4.png',
  29.                     './picture/5.png',
  30.                     './picture/6.png',
  31.                 ]
  32.             }
  33.         })
  34.     </script>
  35. </body>
  37. </html>
复制代码
v-show=“index > 0”：当图片不为第一张时表现上一页的按钮
@click=“index–”：点击上一页按钮时，控制数组下标来切换图片，其他同理。
接下来我们来看下效果

v-for

1.作用：基于数据循环，多次渲染整个元素 ->数组、对象、数字。
2.遍历数组语法：v-for=“(item,index) in 数组”。item每一项，index下标
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div id="app">
  12.         <h1>水果店</h1>
  13.         <p v-for="(item,index) in list">{{item}}</p>
  14.     </div>
  15.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  16.     <script>
  17.         const app = new Vue({
  18.             el: "#app",
  19.             data: {
  20.                 list:[
  21.                     "西瓜","苹果","香蕉"
  22.                 ]
  23.             }
  24.         })
  25.     </script>
  26. </body>
  28. </html>
复制代码
如许我们就对数组内的水果进行了循环遍历渲染。

v-for小案例

制作一个简易的小书架，可以将书架中已经阅读的书删掉。
明确需求：
1.根本渲染 v-for
2.删除功能
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div id="app">
  12.         <h1>书架</h1>
  13.         <div v-for="(item,index) in booklist" :key="item.id">
  14.             <p>{{item.name}}{{item.author}} <button @click="del(item.id)">删除</button> </p>
  15.                         
  16.         </div>
  17.     </div>
  18.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  19.     <script>
  20.         const app = new Vue({
  21.             el: "#app",
  22.             data: {
  23.                 booklist:[
  24.                     { id: 1, name: '《红楼梦》', author: '《曹雪芹》' },
  25.                     { id: 2, name: '《西游记》', author: '《吴承恩》' },
  26.                     { id: 3, name: '《水浒传》', author: '《施耐庵》' },
  27.                     { id: 4, name: '《三国演义》', author: '《罗贯中》' },
  28.                 ]
  29.             },
  30.             methods:{
  31.                 del(id){
  32.                     //filter:根据条件，保留满足条件的对应项，这里是所有和id不相等的都保留下来，并重新赋值。
  33.                     this.booklist = this.booklist.filter(item => item.id !== id)
  34.                 }
  35.             }
  36.         })
  37.     </script>
  38. </body>
  40. </html>
复制代码
如许我们就做出了一个删除功能的小书架

v-for中的key

语法：key属性=“唯一标识”
作用：给列表项添加的唯一标识。便于Vue进行列表的正确排序复用。
我们给上述代码第一个标签设置个颜色。

以上面的代码为例子，如果我们不加key，现实就是把最后一个删掉了，并将其他的往上移动，并不会改变第一个p标签所带有的颜色。
但是我们加上了key，就相当于对每个p标签加上了唯一标识，如许就知道我们删除的具体是谁人p标签的内容。因此以后写代码都会将key加上。
注意点：
1.key的值只能是字符串或数字范例
2.key的值必须具有唯一性
3.保举利用id作为key(唯一)，不保举利用index作为key(会变化，不对应)
v-model

1.作用:给表单元素利用，双向数据绑定->可以快速获取或设置表单元素内容


  • 1.数据变化 -> 视图主动更新
  • 2.视图变化 -> 数据主动更新
2.语法：v-model=“变量”
下面是一个v-model双向获取的实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div id="app">
  12.          账户：<input type="text" v-model="username"><br>
  13.          密码：<input type="password" v-model="password"><br>
  14.          <button @click="login">登录</button>
  15.          <button @click="reset">重置</button>
  16.     </div>
  17.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  18.     <script>
  19.         const app = new Vue({
  20.             el: "#app",
  21.             data: {
  22.                 username:"",
  23.                 password:""
  24.             },
  25.             methods:{
  26.                 login(){
  27.                     console.log(this.username,this.password);
  28.                 },
  29.                 reset(){
  30.                     this.username = "",
  31.                     this.password = ""
  32.                 }
  33.             }
  34.         })
  35.     </script>
  36. </body>
  37. </html>
复制代码
通过v-model我们在视图上修改，或者在代码块修改都可以改变username的值或者password值，如许，登录就是必要获取视图上修改的账号和暗码，重置只必要将他们重新赋值未空即可，接下来我们来看下这串代码的效果。

结语

本次分享就到这里了，感谢小伙伴的浏览，如果有什么发起，欢迎在批评区留言，如果给小伙伴们带来了一些收获，请留下你的小赞，你的点赞和关注将会成为博主分享逐日学习的动力。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大号在练葵花宝典

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表