【vue2第二章】vue指令(v-for,v-model,v-bind,v-on....)

一个大不溜w

已于 2023-08-24 23:47:13 修改

阅读量92

点赞数

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

于 2023-08-24 23:41:27 首次发布

本文链接：https://blog.csdn.net/weixin_72979483/article/details/132483005

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

vue指令

什么是vue指令呢？
vue指令就是指带有 “v-”前缀的特殊属性，不同的属性对应不同的功能，学习不同的指令可以解决不同的业务需求.

一、v-html指令

v-html类似于innerHTML向页面插入HTML标签，但是它在动态的解析字符串标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div v-html="msg"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
        el:"#box",
            data:{
                msg:`<a href="http://www.baidu.com">百度</a>`
            }
        })
    </script>
</body>
</html>

这段代码就会在浏览器中看到一个超链接，点击就会是baidu搜索的页面。

二、v-if(条件渲染) 和 v-show

v-if和v-show是两个很相似的指令，都是根据判断条件来显示和隐藏标签的，但是事实上他们又有很大的区别。
相同点：

控制元素的显示与隐藏
语法v-if=“表达式” 或 v-show=“表达式” 表达式值为 “true”则显示，为“false”则隐藏。

不同点: v-show是通过控制css样式来显示和隐藏标签，始终都会加载到页面。
v-if是条件渲染一但条件不成立。那么是不会渲染标签的

	作用	语法	原理	应用场景
v-if	控制元素的显示与隐藏	v-if=“表达式” 值为 “true”则显示，为“false”则隐藏。	v-if是条件渲染一但条件不成立。那么是不会渲染标签的	不频繁切换的场景
v-show	控制元素的显示与隐藏	v-show=“表达式” 值为 “true”则显示，为“false”则隐藏。	通过控制css样式来显示和隐藏标签，始终都会加载到页面。	频繁切换显示隐藏的场景

演示：flag为true时，两个div都显示
在这里插入图片描述
当flag为false时，v-show控制的标签只是改变了css样式的display值，而v-if控制的标签则是直接没有渲染。

三、v-else-if 和 v-else(配合v-if进行条件渲染)。

作用：配合v-if进行条件渲染。
注意：必须紧挨这v-if使用。
语法：v-if=“条件表达式” v-else-if=“条件表达式” v-else

当flag为1时显示第一个标签
在这里插入图片描述
当flag显示不为1时：

四、v-on(添加监听事件)

1.作用：注册事件=添加监听+提供处理逻辑
2.简写： @事件名=“内联语句”
3.语法：

v-on：事件名=“内联语句”
v-on：事件名=“methods中的函数名”

首先演示第一种内联语：
点击其中的按钮可以对count的值进行自增或者自减。
在这里插入图片描述
演示第二种methods中的函数名：
通过点击显示隐藏按钮，来回切换当前flag的值，从而实现隐藏显示 "hello! vue!"的效果

当然第二种方式也可以传参，调用，就像：我传入一个”我爱学习vue“的字符串，methods里面接收参数，打印到控制台。
在这里插入图片描述

五、v-bind

作用：动态设置thml的标签属性如：src，url，titlte
语法：“v-bind：属性名=”表达式“”
简写：":属性名=”表达式“ "
在这里插入图片描述

六、v-for(循环)

1.作用：基于数据循环，多次渲染整个元素
2.遍历数组语法：
v-for=“(item,index) in 数组”
item：每一项
index：数组下标
演示:使用v-for循环遍历了data中的数据list数组.
在这里插入图片描述

v-for中的key

key的作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用。
注意点：

key值只能是字符串或者数字类型
key的值必须具有唯一性
推荐使用id做为key(唯一)，不推荐使用index做为key(会变化，不唯一)

这是一个测试案列：
在这里插入图片描述

加了key会指定删除元素在这里插入图片描述

没有加key的效果v-for将会直接复用元素：在这里插入图片描述

在这里插入图片描述

七、v-model(双向绑定)

v-model可以让数据和视图，形成双向数据绑定
(1) 数据变化，视图自动更新
(2) 视图变化，数据自动更新
语法：v-model=“变量名”

如下图：在浏览器input框输入改变值下面vue插件对应的值也会改变。在vue插件中改变对应的值，那么上面浏览器中input框的数据也会改变.
在这里插入图片描述

一个大不溜w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue2第二章】vue指令(v-for,v-model,v-bind,v-on....)

vue指令什么是vue指令呢？ vue指令就是指带有 “v-”前缀的特殊属性，不同的属性对应不同的功能，学习不同的指令可以解决不同的业务需求.
复制链接

扫一扫