vue2 基础（三）

最新推荐文章于 2023-08-13 21:39:25 发布

原创最新推荐文章于 2023-08-13 21:39:25 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-bind #v-on #绑定

vue 专栏收录该内容

22 篇文章

订阅专栏

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

---------------------------------------------------------------------------------------------------------------

在上一篇中，我们使用了 v-on 这个指令，这一篇我们来看看 v-bind ,

首先我们写一下基本内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span>{{message}}</span>
     </div>

     <script>
          new Vue({
              el:"#main",
              data:{
                  message:"数据又放到里面来了"
              }
          });
     </script>
</body>
</html>

上面我们将数据渲染到 <span> 中了，我们可以清楚的看到<span>中没任何属性，下面我尝试使用 v-bind 给这个<span>

添加一个属性 nb="123";

你可能会这样做：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span nb="123">{{message}}</span>
     </div>

     <script>
          new Vue({
              el:"#main",
              data:{
                  message:"数据又放到里面来了"
              }
          });
     </script>
</body>
</html>

这样确实是可以添加上，但是我们没有使用到 v-bind ，

我们看看 v-bind 是怎么绑定的；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span v-bind:nb="nbvalue">{{message}}</span>
     </div>

     <script>
          let abc={
              message:"我数据又出来了",
              nbvalue:123
          }
          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>

我使用 v-bind 命令成功的绑定了属性；

在这个地方，v-bind 是可以简写的，只要写个冒号就行了：

我们改写一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span :nb="nbvalue">{{message}}</span>
     </div>

     <script>
          let abc={
              message:"我数据又出来了",
              nbvalue:123
          }
          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>