Vue-基本语法

 

Vue: v-bind 绑定事件;

el：是挂起的含义，“”里填类名;

 

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <a v-bind:href="URL">点击一下</a>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            username: "",
            URL: "https://www.baidu.com/",
          };
        },
      });
    </script>
  </body>
</html>
复制代码

 

Vue: v-model 绑定事件;

 

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <input name="username" v-model="username" type="text" />{{username}}
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            username: "",
          };
        },
      });
    </script>
  </body>
</html>
复制代码

 

Vue: v-on 简写 @click绑定事件;

 

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input @click="tests()" value="登录" type="button" />
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        methods: {
          tests() {
            alert("12346");
          },
        },
      });
    </script>
  </body>
</html>
复制代码

 


Vue: v-if ，v-if-else，V-show 绑定事件;

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-if="ttt">当ttt为true时显示(这是if和else)</div>
      <div v-else>当ttt为false时显示(这是if和else)</div>
      <div v-show="ttt">当ttt为true时(这是show)</div>
    </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          ttt: false,
        },
      });
    </script>
  </body>
</html>
复制代码

 

v-for

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-for="add in adds">{{add}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            adds: ["我爱你", "静香"],
          };
        },
      });
    </script>
  </body>
</html>
复制代码

 

posted @   しゅおく  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
· Vue的键盘事件
· vue-事件修饰符
· Vue基本语法
· Vue基础语法
· Vue基本语法
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示