vue.js 常用指令

最新推荐文章于 2023-07-12 23:43:34 发布

俊小赞

最新推荐文章于 2023-07-12 23:43:34 发布

阅读量299

点赞数 1

分类专栏： # Vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_44808483/article/details/112255197

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
一、插值
二、显示/隐藏
- 1. v-show
- 2. v-if
四、v-bing
五、v-model
总结

前言

在vue当中，内置了一定的指令，通过这些指令可以实现数据与DOM之间的绑定，并且一旦发生了数据的绑定时，数据发生改变，DOM中相关的数据也会变化，下面我们将介绍常见的指令。

一、插值

1. v-once

渲染字符串，值：无，只渲染一次，之后不会随着数据的改变而改变。

2. v-text

渲染字符串，值：string，默认样式。

3. v-html

渲染字符串，值：string，会将string中的html解析出来。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
  </head>
  <body>
    <div id="app">
      <h1>v-text</h1>
      <h2 v-text="content"></h2>
      <h2 v-text="contentHtml"></h2>
      <hr />
      <h1>v-html</h1>
      <h2 v-html="content"></h2>
      <h2 v-html="contentHtml"></h2>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        content: '这是一段文本',
        contentHtml: '<a href="">这是一段带有html元素的文本</a>',
      },
    });
  </script>
</html>

在这里插入图片描述

4. v-for

遍历渲染，值：数组（常用）、对象
`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in arrList">{{item}}</li>
      </ul>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        arrList: ["吃饭", "睡觉", "打豆豆"],
      },
    });
  </script>
</html>

在这里插入图片描述

二、显示/隐藏

1. v-show

显示或者隐藏元素，值：boolean，原理是控制元素的display值，常用于经常显示隐藏的元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container"></div>
      <div v-show="isShow" class="container"></div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        isShow: false,
      },
    });
  </script>
</html>

在这里插入图片描述

2. v-if

显示或者隐藏元素，值：boolean，原理是控制元素中的DOM树，对于不经常显示隐藏的元素进行使用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container"></div>
      <div v-if="isShow" class="container"></div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        isShow: false,
      },
    });
  </script>
</html>

在这里插入图片描述

# 三、v-on 进行事件的绑定，值：事件名，`v-on: 同等于 @`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <style>
      
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 以下两种绑定方式均可以触发 -->
      <h2 v-on:click="clickHandler">点击我</h2>
      <h2 @click="clickHandler">点击我</h2>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      methods: {
        clickHandler: function () {
          window.alert("点击事件成功绑定！");
        }
      }
    });
  </script>
</html>

在这里插入图片描述

四、v-bing

控制元素的属性值、class、行内样式等，值：字符串、对象，v-on: 同等于 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>控制属性值：</h1>
      <img v-bind:src="imgUrl" />
      <hr />
      <h1>控制class：</h1>
      <h2>这是一段文本</h2>
      <h2 v-bind:class="className">这是一段文本</h2>
      <!-- v-bind简写形式 -->
      <h2 :class="className">这是一段文本</h2>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        className: 'active',
        imgUrl: 'http://suzhou.chinatupai.com/Suzhou/static/pic/1598408796.jpg',
      },
    });
  </script>
</html>

在这里插入图片描述

五、v-model

获取或设置元素的值，值：无，实现数据双向绑定。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>你输入的是：{{ content }}</h2>
      <input v-model="content" type="text">
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        content: "",
      }
    });
  </script>
</html>

总结

以上便是一些常用到的vue指令，对于 v-on 指令，感兴趣的可以加以练习，灵活地使用。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，

俊小赞

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js 常用指令

v-text输出字符串v-html输出字符串，但是html标签也可以正常渲染v-on: 可替换 @事件绑定事件修饰符 @keyup.enter 按回车键之后v-show显示或隐藏元素，操作display值v-if显示或隐藏元素，操作DOM树v-bing: 可替换 :设置元素的样式v-for遍历data中的数组（常用）和对象v-model获取或设置表单元素的值（数据双向绑定）...
复制链接

扫一扫