Vue.js核心指令解析-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/79999290

本篇我们了解一下 v-model , v-if , v-for 这三个指令；

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

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

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

第一个：v-model

这个指令可以实现表单元素的双向绑定，可以在浏览器中查看相应的效果；

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

     <script>
          let abc={
              message:"我们来学习模板吧"
          }

          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>

第二个：v-if

这个指令可以实现判断；

<!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-if="showme">{{message}}</span>
     </div>

     <script>
          let abc={
              message:"我们来学习模板吧",
              showme:false
          }

          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>

从上面的效果可以看出，如果 showme=false, 那么模板中的元素是不会显示的，如果我们改变 showme=true，

那么就可以正常显示了；通过布尔值来实现条件渲染的作用；

最后我们来看一下这个 v-for ,很明显，这是一个循环作用的指令；

下面我们简单的循环出一个对象，更多具体的信息自行查看官网文档

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

     <script>
          let abc={
             message:{
                 name:"坚持",
                 age:"25",
                 do:"looking for"
             }
          }

          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>