vue的指令及用法,vue常见指令以及语法
本文以click为例介绍vue.js中常用的v-指令你可以使用v-on指令来监控DOM事件，并在被触发时运行一些JavaScript代码。本文将通过示例代码向您详细介绍。感兴趣的朋友可以跟随边肖去看一看。
目录
解释VUE V-textv-html:V-onv-IFV-FORv-modelv-bindv-showv-bind与V-model之间的区别
Vue中 v-text on if for model bind show 的解释 v-text
V-text:元素的InnerText属性，必须是双标签的，与{{}}效果相同，很少使用。
注意：v-text只能在双标签中使用。
v-html:
元素innerHTML
V-html实际上是给元素的innerHTML赋值。
v-on
实际上，v-on之后不仅是click事件，还有其他事件，用法类似。例如：v-on:click/mouseout/mouseover/mousedown…
点击作为示例
注意：所有v-on都可以缩写为@，例如v-click可以缩写为@click。
您可以使用v-on指令来监听DOM事件，并在被触发时运行一些JavaScript代码。一般来说，监听dom会触发一些操作，这些操作(比如点击)被触发后执行的动作(js)可以直接写在后面。
v-on:click=item=1
v-if
V-if:判断是否插入这个元素相当于破坏和创建这个元素。
v-for
在数据“索引索引项目索引数据”中使用v-for v-fo=(项目，索引)
1.迭代普通数组
在数据中定义一个普通数组
数据：{
列表：[1，2，3，4，5，6]
}
P-for= (item，I)in list -索引值-{ { I } }-每个项目-{{item}}/p
2.迭代对象数组
在数据中定义对象数组
数据：{
列表：[1，2，3，4，5，6]，
listObj:[
{id:1，姓名： zs1}，
{id:2，姓名： zs2}，
{id:3，名称： zs3}，
]
}
//使用v-for指令在html中呈现
listObj中的p v-for (uesr，I
//id-{ { user . id } }-name-{ { user . name } }
v-model
可以使用v-model指令对(有很多类型的标签，比如button、select等)进行双向数据绑定。)和元素。v-model将忽略所有表单元素的值、检查和选择的属性的初始值，并始终使用Vue实例的数据作为数据源。您应该通过JavaScript在组件的数据选项中声明初始值：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 16/dist/vue . js /script
title vue/标题
/头
身体
div id=应用程序
输入垂直模型=消息
p输入值为：{{message}}/p
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
信息：“你好！”
}
})
/脚本
/body
/html
v-bind
用于动态更新html中元素的属性，如id class、href、src等。
缩写：v-bind:href缩写：href
a :href={{url}}aa/a
下面是一些关于v-bind的代码来演示v-bind。
风格。活动{
边框：1px纯红；
}
/风格
div id=应用程序
img v-bind:src=imgSrc alt=
英国铁路公司
img:src= img src alt= :title= img title ！:isActive？active : @ click= toggle active
英国铁路公司
img:src= img src alt= :title= img title ！:class= { active:is active } @ click= toggle active
/div
var app=新Vue({
埃尔： #app ，
数据：{
img src: http://www . ithe IMA . com/images/logo . png ，
标题：“伏地魔”，
isActive:false
},
方法：{
toggleActive:function(){
this.isActive=！this.isActive
}
},
})
v-show
如果要隐藏某个元素，可以将display:none添加到该元素的样式中。这是一个css风格的开关。
v-bind与v-model的区别
在某些情况下，我们需要将v-bind与v-model结合使用：
输入：value=name v-model=body
Data.name和data.body，谁跟谁换？甚至，他们会冲突吗？
其实他们的关系和上面的解释是一样的。v-bind的作用不包含双向绑定，所以：value的作用是让input的value属性值等于data.name的值，而v-model的作用是在input和data.body之间建立双向绑定，所以，首先data.body的值会赋予input的value属性，其次，input中输入的值发生变化时，data.body也会发生变化。
如上所述，下面两句话是等价的：
输入垂直模型=消息
输入v-bind:value= message v-on:input= message=$ event . target . value /
关于Vue中v- instruction的使用总结的这篇文章到此为止。有关在Vue中使用v- instruction的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。