Vue中常用指令有哪些-创新互联

这篇文章将为大家详细讲解有关Vue中常用指令有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联，为您提供网站建设、成都网站制作、网站营销推广、网站开发设计，对服务纸箱等多个行业拥有丰富的网站建设及推广经验。成都创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。与客户共同发展进步，是我们永远的责任！

具体如下：

1、创建一个vue实例

vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先获取到界面的标签元素，并实例化一个vue实例。

例如在HTML创建一个div：


  {{msg}}

在js中将其实例化为vue对象：

  let app=new Vue({
    el:'#app',//标签的类名、id，用于获取元素
    //以键值对的形式存放用到的数据成员
    data:{
      msg:'显示的内容'
    },
    //包含要用到的函数方法
    methods:{
    }
  });

这样js中msg的内容就会在p标签内显示出来。

2、vue常用指令

1、 v-model:将组件与变量进行双向绑定，当组件数据修改时，变量会随之改变。它后面可加修饰符，例如.lazy，只有在标签中的值发生改变时才同步到变量，.trim过滤用户输入中的空格。

2、v-once:不允许修改数据，例如HTML中有如下三个标签：

  
    {{msg}}
    {{msg}}

在input框内输入内容后，会传到msg变量中，第二个p标签内显示的信息会随着msg发生变化，而第一个带有v-once的p标签则只会显示msg的初始值，不会随之变化。

3、v-if="表达式"，根据表达式的结果来判断，是true则渲染元素，false则将元素注释掉

4、v-show与v-if类似，true就渲染，但是false并不是注释掉，而是通过display:none;来将元素隐藏，如果需要来回切换，使用v-show更好。例如：

5、v-else、v-else-if与v-if连在一起使用构成逻辑判断，根据返回值决定是否显示，不可以单独或者分开使用，例如：

6、v-for用于遍历元素，使用格式为v-for="(值,键) in 遍历内容"，其遍历的内容可以是数组、对象、字符串，例如在js的data中有一个person对象，person:{name:'tony',age:15,sex:'男'}，将其内容在页面遍历输出：

let app=new Vue({ el:'#app', data:{ msg:'第一次输入信息', }, methods:{ changeContent(){ this.msg="修改后的输入信息"; } } });

大橙子网站建设，新征程启航

Vue中常用指令有哪些-创新互联

其他资讯