Vue：判断循环和绑定事件（狂神）

已于 2022-07-30 11:59:15 修改
阅读量1.1k 收藏
点赞数
分类专栏： # Vue总结 文章标签： vue.js 前端 javascript
于 2022-06-26 11:28:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengfengling999/article/details/125467038
版权

（一）

1.1：MVVM:Vue简单实现         {{ }}

不使用标签的形式绑定：

demo01.html：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     {{message}}
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             message:"hello Vue"
         }
     });
 </script>

</body>
</html>

 view层：

<div id="app">
     {{message}}
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model：   Model:数据  
         data:{
             message:"hello Vue"
         }
     });
 </script>

上面message监听下面，下面发生了改变上面就会发生改变，没有操作dom，这个就叫虚拟dom。

通过控制台进行控制，相当于viewModel： 

 

​

在控制台输入：vm.message="你好"  回车 

 ​

动态更新： 

​ 

1.2：v-bind的使用 

 使用标签的形式绑定：

​

 

 ​

 ​

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<h1>狂神说Java2</h1>

<!--view层，模板-->
 <div id="app">
     <!--{{message}}-->

     <span v-bind:title="message">
         鼠标停留几秒查看此处动态绑定的提示信息
     </span>
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             message:"hello Vue1"
         }
     });
 </script>

</body>
</html>

鼠标箭头悬浮在字体上显示：hello，vue1 

​

 在控制台进行更改，悬浮时字体动态更新​

（二）

条件判断语句 ：v-if   v-else

 ​

 demo02.html:

if-else使用：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     <h1 v-if="ok">Yes</h1>
     <h1 v-else>No</h1>
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             ok: true
         }
     });
 </script>

</body>
</html>

​

在控制台更改：false ，回车

​ 

 ​

if else-if .. else使用：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     <h1 v-if="type==='A'">A</h1>
     <h1 v-else-if="type==='B'">B</h1>
     <h1 v-else>C</h1>
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             type:"A"
         }
     });
 </script>

</body>
</html>

在控制台动态更改，点击回车： 

​

 ​

（三）

 for遍历：v-for

demo03.html:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     <li v-for="item in items">
         {{item.message}}
     </li>
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             items:[
                 {message:'狂神说Java'},
                 {message:'狂神说前端'}
             ]
         }
     });
 </script>

</body>
</html>

​

 可以填第二个参数index：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     <li v-for="(item,index) in items">
         {{item.message}}--{{index}}
     </li>
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             items:[
                 {message:'狂神说Java'},
                 {message:'狂神说前端'}
             ]
         }
     });
 </script>

</body>
</html>

​

（四）

事件绑定：v-on

demo04.html:

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     <button v-on:click="sayHi">click Me</button>
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             message:"狂神说Java"
         },
         methods:{//方法必须定义在Vue的methods对象中，v-on：事件
             sayHi:function(event){
                 alert(this.message)
             }
         }
     });
 </script>

</body>
</html>

 

喵俺第一专栏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue：Axios异步通信
希望有点用
09-03 320
Vue：Axios异步通信
vue 实现特定条件下绑定事件
10-16
今天小编就为大家分享一篇vue 实现特定条件下绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue之事件绑定（初识Vue事件）
百赢出品，必属精品
04-19 1219
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
【Vue】—2：判断循环（狂神说系列）
dearand的博客
12-02 486
2，判断循环 1，指令：带有v-前缀的 2，判断 调试界面：使用vue对象调用data中的属性 if else <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <bo
【vue】基础语法：数据绑定&双向绑定&条件判断&循环&事件绑定&组件
hanne_lovegood的博客
03-15 1184
数据绑定：{{ }}、v-bind（v-bind可缩写为 : ） 双向绑定：v-model 条件判断：v-if、v-else-if、v-else，布尔值 循环：v-for="item in items"，数组 事件绑定：v-on:click，方法（v-on可缩写为 @）
VUE基本语法,if,for,绑定事件和双向绑定
qq_39379958的博客
06-28 594
VUE基本语法 v-if <body> <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <script> var mar=new Vue({ el:"#app", data:{ ok:true } }); </script&g
Vue入门级教学（超详细）
m0_51634403的博客
04-11 436
关注点分离原则Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 ： 网络通信 ： axios页面跳转 ： vue-router状态管理：vuexVue-UI : ICE , Element UIHTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容CSS
Vue 的基础知识 - 判断, 循环, 事件, 通信
xaiobit_hl的博客
06-09 709
Vue 基础知识 - 判断, 循环, 事件, 通信
Vue ——02、基本语法，绑定事件，双向绑定，组件
weixin_42858422的博客
02-10 1259
基本语法，绑定事件，双向绑定，组件 一、基本语法 v-bind ，v-if， v-else ，v-else-if ，v-for二、绑定事件 v-on三、双向绑定 v-model四、组件 template, component , props————————创作不易，如觉不错，随手点赞，关注，收藏(*￣︶￣)，谢谢~~ 一、基本语法 v-bind ，v-if， v-else ，v-else-if ，v-for 1.1 v-bind 绑定元素 <!DOCTYPE html> <html l
【狂神Vue】Vue,ElmentUI
xbd_zc的博客
04-21 2158
文章目录Vue一,第一个Vue程序方式一:[直接用 script 引入](https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入)方式二:[CDN](https://cn.vuejs.org/v2/guide/installation.html#CDN)创建项目1,导入`vue.js`2,编写页面3,测试二,指令2.1,v-bind指令2.2,条件判断v-if v-else v-else-if2.3,遍历循环 v-for2.4,
vue绑定事件后获取绑定事件中的this方法
10-18
今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的this方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue动态生成dom并且自动绑定事件
01-19
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没...但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model=item.val style=width:40px>
self-vue：vue数据双向绑定原理分析和简单实现
02-06
自我评价vue数据双向绑定原理分析和简单实现代码总计分为三个版本，v3为最终版本效果图博客地址
nimjs-vue：Nim的VueJS绑定
02-04
nimjs-vue：Nim的VueJS绑定
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 330
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 216
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
vue for 循环 v-model绑定
05-23
在 Vue 中，我们可以使用 `v-for` 指令来循环渲染列表。如果我们要为每个列表项绑定一个数据模型，可以在 `v-for` 循环中使用 `v-model` 指令。 例如，假设我们有一个数组 `items`，我们想要将其循环渲染为一组复选框，并将每个复选框的选中状态绑定到一个名为 `checkedItems` 的数组中，我们可以这样写： ```html <div v-for="item in items" :key="item.id"> <input type="checkbox" :value="item.value" v-model="checkedItems"> <label>{{ item.label }}</label> </div> ``` 在上面的代码中，我们首先使用 `v-for` 循环遍历 `items` 数组中的每个项，并为每个项创建一个复选框。我们通过 `:value` 绑定每个复选框的值为当前 `item` 对象的 `value` 属性。然后，我们使用 `v-model` 将每个复选框的选中状态绑定到 `checkedItems` 数组中。 注意，我们在循环中使用了 `:key` 绑定每个项的唯一标识符。这是为了帮助 Vue 更高效地更新 DOM，因为它可以跟踪每个项的变化。如果不使用 `:key`，Vue 会发出警告，并可能导致性能问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵俺第一专栏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值