说出几种vue当中的指令和它的用法,vue的指令及用法
常用的vue指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等。下面这篇文章主要介绍八个vue。
目录
Vue的八种常用V指令1v-文本指令2 v-html指令3 v-on指令案例：计数器4v-显示指令5 v-if指令6v-绑定指令7 v-for指令8 v-on补充总结
Vue中常用的8种v指令
根据官方网站，指令 是带有 v- 前缀的特殊属性。通过指令来操作DOM元素
功能v-text=设置“变量/表达式”文本
可变号可以直接写，也可以拼接。
如果出现字符串，请使用外部引号v-html="variable "文本或页面设置。
如果变量只是纯文本，它的功能与v-text相同。
如果变量是一个完整的标记字符串，它将被解析成htmlv-on:click="method name "
@click="method name "绑定方法
它可以是无参数方法，也可以是参数方法。显示和隐藏布尔变量的标签。
根据布尔变量的真假，显示或隐藏v-if="布尔变量"标签的创建和销毁。
效果和v秀一样，但是频繁操作代价很大。v-for=item，index in arr
v-for="iteminarr "数组的循环遍历
遍历数组中的数据和索引v-bind:label attribute=" attribute value "
:标记属性的标记属性="属性值"绑定
可以直接修改标签中的属性值v-model="variable value "数据双向绑定。
变量值的修改会影响页面显示，页面变化也会影响变量值。
1 v-text 指令
作用：
获取数据，设置标签的内容，并以纯文本显示。v-text将覆盖标签中的内容。如果要拼接数据，可以直接在v-text中拼接。如果你拼接数字，直接用" "。如果拼接字符串，需要将内容用不同于外部的引号括起来。注意：默认写法会替换所有内容，指定内容可以用插值表达式{{}}替换。
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
！-第一个。获取vue中定义的数据会将插值表达式的内容与标签中的内容拼接-
H2{{msg}}-云梦远去/h2
！-第二，获取vue中定义的数据，设置标签中的内容，覆盖标签中的内容-
H2-text= msg -云梦归瑶/h2
h2 v-text=msg 21/h2！-V-Text拼接数字可以直接添加-
H2-text= msg -云梦归来 /h2！-v-text拼接字符串需要使用不同于外部的单引号或双引号-
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
消息：“Java程序员”，
},
});
/脚本
/html
2 v-html 指令
作用：
它可以用作v-text来显示普通文本。
设置元素的innerHTML(可以给元素写一个新的标签)
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
！-1.获取普通文本的三种方法-
h2{{msg}}/h2
h2 v-text=msg/h2
h2 v-html=msg/h2
整点
！-2.V-HTML不仅可以作为v-text使用，更重要的是可以设置元素的innerHTML
h2 v-text=url/h2！-v-text直接显示为文本-
h2 v-html=url/h2！-V-HTML将以已定义标签的形式显示-
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
消息： Java程序员，
url: a href=https://www.baidu.com 百度一下/a
},
});
/脚本
/html
3 v-on 指令
作用： 为元素绑定事件， 比如： v-on:click,可以简写为 @click="方法
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
！- 1.单击事件-
！-标准书写的方式v-on:click=方法名-
输入类型=按钮值=调用绑定事件指令-单击事件-标准书写v-on:click=showbr
！-简写的方式：@click=方法名-
输入类型=按钮值=调用绑定事件指令-单击事件-简写的方式@click=showbr
！- 2.双击事件-
输入类型=按钮值=双击事件@dblclick=showbr
整点
！-绑定点击事件，修改标签内容-
H2 @ click= changeName"{ msg } }/H2
H2 v-text= msg @ click=改名/H2
H2 v-html= msg @ click=改名/H2
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
消息： Java程序员
},
//通过方法来定义绑定事件中调用的方法
方法：{
show:function(){
警报( v-on指令对应的方法被调用);
},
changeName:function(){
//使用这获取数据中的数据
this.msg=-云梦归遥；
},
},
});
/脚本
/html
案例：计数器
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
！-link href= CSS/input num。CSS rel=外部no follow rel=样式表-
/头
身体
div id=应用程序
！-计算功能区域-
差异
输入类型=button @click=addNum value=
span{{num}}/span
输入类型= button v-on:click= MINUS num value=-
/div
p{{result}}/p
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
数字：0,
结果： 当前数值是[ 0 ], 还未执行操作
},
方法：{
addNum: function(){
这个。num=1；
this.result=当前数值是[ this.num ]，执行一操作；
},
minusNum: function(){
这个。num-=1；
this.result=当前数值是[ this.num ]，执行-1 操作；
},
},
});
/脚本
/html
4 v-show 指令
作用： v-show 需要一个 boolean 类型的值，根据值的变化，进行标签的显示和隐藏
原理：修改风格的显示为街区或没有，进行显示和隐藏
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
输入类型=按钮值=图片显示/隐藏切换@click=showbr
！-虚拟秀需要一个布尔型类型的值，根据值的变化，进行标签的显示和隐藏-
img src= img/logo。jpg v-show= flag style= width:300 px；高度：300像素；
！-还可以通过表达式的结果来进行显示和隐藏-
img src= img/logo。jpg v-show= num 18 style= width:300 px；高度：300像素；
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
flag: true，//作为是否显示图片的判定值
编号：21
},
方法：{
show:function(){
this.flag=！这个. flag
},
},
});
/脚本
/html
5 v-if 指令
作用： 根据表达值的真假，切换元素的显示和隐藏( 操纵dom 元素 )
原理：会操作数字正射影像图元素，将元素删除或添加，而不是像虚拟展示一样修改样式
使用场景：频繁切换使用v秀，反之使用控制显示
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
输入类型=按钮值=v-if切换图片显示/隐藏@click=showbr
！-如果-如果根据表达式的真假判断显示或隐藏-
img src= img/logo。jpg style= width:300 px；高度：300像素；v-if=isShow
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
isShow:假，
},
方法：{
show: function(){
this.isShow=！这个。是秀；
},
},
});
/脚本
/html
6 v-bind 指令
作用：设置元素的属性（比如：src，标题，类别，样式传递数据串)
一次只能修改一个属性
虚拟绑定：属性名="属性值":属性名！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
！-这是原图片-
img src= img/logo。jpg style= width:300 px；高度：300像素；alt=图片加载失败
！- v-bind:src设置了一个图片的属性-
img v-bind:src= img 1 style= width:450 px；高度：300像素；alt=图片加载失败
！- v绑定：标题设置了一个图片的标题，使用v型装订修改属性都可以简写为：属性名-
img v-bind:src= img 2 style= width:450 px；高度：300像素；:title=img2_title alt=图片加载失败
！- v绑定设置班级-
div style= width:300 px；高度：300像素背景：绿色；:style={width: size px}/div
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
img1: img/4.png ，
img2: img/3.png ，
img2_title:斗罗大陆-火舞，
尺码：200,
},
方法：{
},
});
/脚本
/html
7 v-for 指令
作用： 根据数据生成列表结构，常与数组一起使用，进行遍历操作
v-for=item，arr 1中的索引 v-for= person in persons 相关方法：
push():将元素追加进入数组shift():将数组的起始元素删除数组的长度变化，会同步更新到页面上，是响应式的
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
保险商实验所
！-伏-代表：在里标签中进行获取数组元素，进行展示-
！-项目：循环得到的元素；索引：获取元素在数组中的下标-
li v-for=item，index in arr1
第{ {索引1}}个同学：{{item}}
/李
/ul
整点
输入类型=按钮值=添加数据@click=addData
输入类型=按钮值=移除数据@click=removeData
！- v-for遍历，展示数据-
h2 v-for=person in persons
我是{{person.name}}，我今年{{person.age}}岁。
/h2
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
//数组
arr1: [迈克,约翰,杰克],
//对象数组
人员：[
{姓名：迈克，年龄：21},
{姓名：约翰，年龄：22},
{姓名：杰克，年龄：23},
],
},
方法：{
addData: function(){
//向数组中添加元素
这个。人。推({姓名：彼得，年龄：24 });
},
removeData: function(){
//移除数组中的元素，会移除第一个元素
这个。人。shift()；
},
},
});
/脚本
/html
8 v-on 补充
作用：
可以将参数event修饰符传递给函数，可以算出如何触发事件，比如按键，回车等！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=js/vue.min.js/script
/头
身体
div id=应用程序
！-v-on:绑定函数，可以作为参数传递-
type= button value= gift brush up @ click= show(3，箭头穿云) br
span style= color:green；将{{num}} /span刷到锚点
span style= color:red；{{gift}}/span
整点
！-v-on:事件修饰符指定触发事件的方式，如按键、回车等。-
type= text @ keyup= up placeholder=您一输入内容就会弹出一个弹出窗口 br
type= text @ keyup . Enter= up placeholder= Enter弹出 br
/div
/body
脚本
var VM=new Vue({
埃尔： #app ，
数据：{
数字：1，
礼物：“一个鱼丸”，
},
方法：{
显示：函数(p1，p2){
this.num=p1
this.gift=p2
},
up:function(){
alert( hello world )；
},
},
});
/脚本
/html
总结
关于Vue中八个常用V指令的详细讲解，本文到此为止。更多相关Vue常用V指令，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。