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框的数据也会改变.