vue指令介绍

程序且秃头

于 2023-04-12 22:58:40 发布

阅读量181

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qwerty499256/article/details/130118070

版权

文章目录

前言
一、vue指令是什么？
二、使用步骤
总结

vue常用指令

v-for
v-show
v-if和v-else
v-model
v-bind

前言

vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。

一、vue指令是什么？

在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。

二、使用步骤

1 v-for

代码如下（示例）：

可以遍历数组、对象、数字、字符串（可遍历结构）
<div v-for="(元素值, 下标) in list":key="index"></div>
<div v-for = "item,index in list">{{ item }}</div>
 在脚手架里面 需要加 :key="index"

2 v-if和v-else

代码如下（示例）：

v-if判断语句之用，v-else则是和v-if一起出现，当v-if判断为true时，v-else不执行；当v-if判断为false时，
v-else才执行。
v-if控制一个元素的显示隐藏 隐藏时不为display none 而是直接删除  用法：v-if='布尔值'
注意： 当和 `v-if` 一起使用时，`v-for` 的优先级比 `v-if` 更高 v-for和v-if尽量不用一起使用，虽然
可以使用但是会有红线 把if换成show或者把if写在template上
<body>
  <div id="app">
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=60">及格</p>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        score: 90,
      }
    })
  </script>
</body>

3 v-show

v-show  控制一个元素的显示隐藏 隐藏时为display none
v-show="判断变量"
v-show='布尔值'
 <h1 v-show="n==1">查话费</h1>
 <h1 v-show="n==2">人工服务</h1> 
  <script>
        
          new Vue({
            el: '#app', 
            data: { 
               bool:false,
               n:''
            }
        })
    </script>

4 v-bind

主要用于属性绑定比如动态绑定a元素的href属性，比如动态绑定img元素的src属性，比如动态绑定一些类、样式
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
   <li v-for="item,i in arr" @click="add(i)" :class="{'active':i==index}">
v-bind:class指令可以与普通的class特性共存

5 v-model

v-model 是Vue框架的一种内置的API指令，本质是一种语法糖写法。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
<input v-model="searchText">
<input type="text" v-model="msg">
 <p>{{msg}}</p>
 <script>
        //表单元素的 双向数据绑定 V - model数据(data)《 = 》视图(页面)
        new Vue({
            el: '#app',
            data: {
                msg: '',
                searchText:'
            }
        })
    </script>