vue中的常用指令以及如何动态添加class

最新推荐文章于 2024-03-14 15:20:36 发布

祎祎呀

最新推荐文章于 2024-03-14 15:20:36 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_47592687/article/details/109584496

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

关于vue 常用指令

    (1)V-for循环 
    (2)v-on绑定事件
    (3)v-model双向数据绑定
    (4)v-text渲染字符串
    (5)v-html渲染html节点及字符串
    (6)v-if判断
    (7)v-show显示/隐藏
    (8)v-bind绑定属性

1.1 v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

v-if=“expression”
expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

显示结果如下、

注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

1.2 v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for=“item in items”
items是一个数组，item是当前被遍历的数组元素。

示例代码：

        </thead>
        <tbody>
            <tr v-for="item in items">
                <td align="center"> {{item.name}}</td>
                <td> {{item.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

name	age

1.3 v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class

v-bind:argument=“expression”

1.4 v-model

v-model（表单元素设置了之后会忽略掉value，checked，selected），常用在表单及
让表单元素和数据实现双向绑定（映射关系）

示例代码

1.5 v-on 指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听元素的点击事件：

<a v-on:click="doSomething">
有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。
Greet按钮将它的单击事件直接绑定到greet()方法，而Hi按钮则是调用say()方法。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

1.6 v-text指令主要是防止页面首次加载时 {{}} 出现在页面上。将对象中数据变量值显示在绑定的标签内容上。

v-text="expresstion"

动态绑定class

vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量，可以通过 class="{{ className }}" 方式设置class，但是vue不推荐这种方式与 v-bind:class 的方式混用，二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存，却可以与原生的class特性共存，一个DOM标签中允许同时出现原生class和v-bind:class。
在这里插入图片描述

祎祎呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的常用指令以及如何动态添加class

关于vue 常用指令 (1)V-for循环 (2)v-on绑定事件 (3)v-model双向数据绑定 (4)v-text渲染字符串 (5)v-html渲染html节点及字符串 (6)v-if判断 (7)v-show显示/隐藏 (8)v-bind绑定属性1.1 v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if=“expression”expression是一个返回bool值的表达式，表达式可以是一个
复制链接

扫一扫