前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册
本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(2)

vue 笔记（二）语法

发布于2021-05-30 07:02     阅读(1336)     评论(0)     点赞(10)     收藏(0)

二.vue语法

1.可以使用v-bind绑定特定元素

例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7. <body>
  8. <!--view层-->
  9. <div id="app">
  10.     <span v-bind:title="message">
  11.         鼠标悬停几秒钟查看详情
  12.     </span>
  13. </div>
  14. <!--    1.导入Vue.js-->
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>
  16.     // model层
  17.     var vm = new Vue({
  18.         el:"#app",
  19.         data:{
  20.             message:"hello,vue!"
  21.         }
  22.     })
  23. </script>
  24. </body>
  25. </html>

鼠标放上去会有message的信息，此处没截上

2. 判断     v-if   v-else-if   v-else

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7. <body>
  8. <!--view层-->
  9. <div id="app">
  10.     <h1 v-if="ok">yes</h1>
  11.     <h1 v-else>no</h1>
  12. </div>
  13. <!--    1.导入Vue.js-->
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>
  15.     // model层
  16.     var vm = new Vue({
  17.         el:"#app",
  18.         data:{
  19.             ok:true
  20.         }
  21.     })
  22. </script>
  23. </body>
  24. </html>

3.循环  v-for

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7. <body>
  8. <!--view层-->
  9. <div id="app">
  10.     <li v-for="item in items">
  11.         {{item.message}}
  12.     </li>
  13. </div>
  14. <!--    1.导入Vue.js-->
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>
  16.     // model层
  17.     var vm = new Vue({
  18.         el:"#app",
  19.         data:{
  20.             items:[
  21.                 {message:'android'},
  22.                 {message:'html'},
  23.                 {message:'web'},
  24.                 {message:'mysql'}
  25.             ]
  26.         }
  27.     })
  28. </script>
  29. </body>
  30. </html>

可以得出下标

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7. <body>
  8. <!--view层-->
  9. <div id="app">
  10.     <li v-for="(item,index) in items">
  11.         {{item.message}}---{{index}}
  12.     </li>
  13. </div>
  14. <!--    1.导入Vue.js-->
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>
  16.     // model层
  17.     var vm = new Vue({
  18.         el:"#app",
  19.         data:{
  20.             items:[
  21.                 {message:'android'},
  22.                 {message:'html'},
  23.                 {message:'web'},
  24.                 {message:'mysql'}
  25.             ]
  26.         }
  27.     })
  28. </script>
  29. </body>
  30. </html>

 

 

 

 

 

 

 

 

 

原文链接:https://blog.csdn.net/Sunweikai123/article/details/117366341




所属网站分类: 技术文章 > 博客

作者：Bhbvhbbgg

链接：http://www.qianduanheidong.com/blog/article/115816/818cd2cabd50aa8d4e82/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容：(最多支持255个字符)




程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

前端精选：在 WPF 中实现融合效果

程序人生：程序员如何实现财富自由？

找工作千万不要找外包？BAT互联网大厂外包亲身经历

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

HTML 上的 Javascript 输入和输出[关闭]

将 JSON 数据打印到 innerHTML 中，获取未定义 - [object]

localStorage onload 显示我选择的 div 吗？

为什么方法 history.pushState() 在我的本地 HTML 中不起作用？

Vue2：如何实现流畅的鼠标移动？

按钮展开显示在页面上，尽管在单击按钮本身之前应该将其隐藏

PHP 无法传递干净 URL 上的问号

触发按钮周围的按钮无法正常工作

Javascript 警告框未显示且错误：您请求的文件不存在

使用 JS 按钮取消设置嵌入在 html 网站中的 php 数组中的单个项目

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站