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

（一）

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>

在控制台输入：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>

相关阅读:
云服务器通过docker安装配置Nacos 图文操作
【Rust 基础篇】Rust 模式：高效、安全和灵活的匹配工具
在毕设中，使用vue3+pinia的一些收获
浅谈餐饮业油烟污染现状及在线监测系统的设计与应用
GEAR框架: Tractian的敏捷工程文化
从\n开始思考
mysql数据库管理-mysql分区表管理
电子器件系列38：mos管散热片
关于用户 email 邮件地址是否允许有加号的问题
Python：RSA秘钥生成与加密解密整理

原文地址：https://blog.csdn.net/dengfengling999/article/details/125467038