vue中常用的指令

javascript_good

于 2023-07-28 13:43:46 发布

阅读量176

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/javascript_good/article/details/131965733

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

想要使用vejs來进行开发，就必须学会vuejs中提供的指令，明白每个指令是什么意思，才能更灵活的让他去显示我们想要的效果。

1、插值表达式

一般在显示文本内容的标签中使用。通过{{ }}包含变量

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id= "app">
    <div>我叫{{name}},我喜欢{hobby}},邮箱:{{dataInfo.email)}</div>
    <ul>
      <li>{{'李杰'}}</li>
      <li>{{'李杰' + "土鳖"}}</li>
      <li>{{ base + 1 + 1 }}</li>
      <li>{{ 1===1 ?"李杰":"alex"}}</li>
    </u1>
    <ul>
       <li>{{ condition?"李杰" :"alex"}}</li>
    </ul>
    <input type=" button" value="点我" v-on:click="clickMe">
</div>
<script>
   var app = new vue({
   el: ' #app',
  data: {
        name :'张顺',
        hobby: ' 篮球',
        dataInfo: {
            id: 1,
            email: 'Xxx. com'
        },
        condition: false ,
        base: 1
        },
   methods: 
        clickMe: function () {
        this.name = "苑日天";
        this.condition = true;
        this.dataInfo. email = "1145.qq.com" ;
        this.base += 100;
}
}
   })
</script>
</body>
</html>

2、v-bind

般用于对标签中的属性进行操作。

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.ig {
   border: 2px solid red;}
</style>

</head>
<body>
<div id= "app">
  <img src="xx.png" class-'c1' />
<img alt="" v-bind:src="imageUr1" v-bind:class="cls">

</div>
<script>
   var app = new vue({
   el: ' #app',
  data: {
        imageUr1 :'https://XXXXXX.png',
        cls: 'ig',
    
        }
   })
</script>
</body>
</html>

v-bind 注意：
简单的格式：属性名=XXX, 例如

<h1 v-bind:class="v1"></h1>
<h1 :class="v1"></h1>

v-bind 属于单向绑定，js修改->HTML修改

3、v-model

一般用于在交互的表中中使用，例如: input、 select. textarea等。 [双向绑定]
标签中输入的用户名和密码的值变化了，script中的user和pwd变量的值也跟着变化；如果script中的user和pwd变量的值发生了变化，标签中的值也会跟着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
   <div>
       用户名：<input type="text" v-model="user">
   </div>
   <div>
       密码：<input type="password" v-model="pwd">
   </div>
    <input type="button" value="登录" v-on:click="clickMe">
    <input type="button" value="重置" v-on:click="resetFrom">

  <script>
      var app = new Vue({
          el: '#app',
          data: {
              user: "",
              pwd: "",
          },
          methods:{
              clickMe: function() {
                  console.log(this.user,this.pwd)
              },
              resetForm:function (){
                  this.user="";
                  this.pwd = "";
              }

      }
      })
  </script>
</body>
</html>

4、v-for

用户数据进行循环并展示。
通过v-for循环创建li标签，循环多少次看dataList的长度，li标签里面显示的值就是黛玉，暴雨，宝钗

<body>
   <div id="app">
      <ul>
          <li v-for="item in dataList">{{ item }}}</li>
      </ul>
   </div>
  

  <script>
      var app = new Vue({
          el: '#app',
          data: {
              datalist: ["黛玉","暴雨","宝钗"],
          }
      })
  </script>
</body>

5、v-on

与事件相关的指令，如

v-on:click
v-on:dblclick
v-on:mouseover
v-on:mouseout
v-on:change
v-on:focus

body>
   <div id="app">
      <ul>
          <li v-on:click="clickMe">点击</li>
          <li v-on:dblclick="doSomething('双击')">双击</li>
          <li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开</li>
      </ul>
   </div>


  <script>
      var app = new Vue({
          el: '#app',
          data: {
          },
          methods:{
              clickMe:function (){
                  alert("点击了")
              },
              doSomething:function (msg){
                  console.log(msg);
              }
          }
      })
  </script>
</body>

6、v-if

条件判断
如果条件成立就显示，如果不成立就显示另外的
如下例子，isLogin的是false, 就不显示user的值，而是显示登录

<body>
   <div id="app">
        <a v-if="isLogin">{{user}}}</a>
       <a v-else> 登录</a>
   </div>


  <script>
      var app = new Vue({
          el: '#app',
          data: {
              isLogin: false,
              user: "黛玉"
          }

      })
  </script>
</body>

7、v-show

根据条件显示或隐藏（标签都会渲染到页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
   <div id="app">
        <h1 v-show="v1">电影</h1>
       <h1 v-show="!v1">电视剧</h1>
   </div>


  <script>
      var app = new Vue({
          el: '#app',
          data: {
              v1: false,
          }

      })
  </script>
</body>
</html>