Vue指令大全_vue加载的指令-CSDN博客

本文链接：https://blog.csdn.net/qq_33482132/article/details/96488079

1.v-if、v-else与v-show

1.1 v-if与v-else
v-if用来判断是否加载html的DOM。在data里面定义一个值，当这个值为真时，显示内容，否则不显示

代码


<template>
  <div class="Two">
     <div v-if="isLogin">hello world</div>
      <div v-else>请登录后操作</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isLogin:true
    }
  }
}
</script>

1.2 v-show
通过调整css中display属性来实现内容是否展示，实际内容已经加载。
1-3 v-if与v-show的区别
v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

条件不成立的不加载

加载后通过css隐藏
2.v-for
2.1 v-for
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是数据数组并且item是数组元素迭代的别名。
2.2 v-for排序
通过v-for将循环出来的数据按照一定的规则进行排序。

排序过程中由于js机制，需要自己写一个方法来进行数据判断，实现数据从小到大排序。

function sortNumber(a,b){
            return a-b
  }

在这里插入图片描述
可以实现数据的正常排序。

2.3 循环输出对象
通过v-for循环数据，将循环出来的对象按属性进行输出。

3.v-text与v-html
通过data将值赋给页面进行渲染，当网速慢或者是js加载错误时会出现页面属性直接渲染的情况，用户体验不友好。
3.1 v-text
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
3.2 v-html
在javascript中写有html标签，用v-text是输出不出来的，需要用v-html标签来输出。
4.v-on
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。可以用@代替，例如@click.

实现简单的自增、自减


<template>
  <div class="Two">       
       {{count}}<br/>
       <button v-on:click="jiafen">加1</button>
       <button v-on:click="jianfen">减1</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count:1
    }
  },
  methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    count--;
                }
            }
}
</script>

5.v-model
v-model指令，绑定数据。主要是将数据绑定在特定的表单元素上，实现双向数据绑定。
在这里插入图片描述


<template>
  <div class="Two">       
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
  </div>
</template>
<script>
export default {
  data () {
    return {
       message:'hello Vue!'
    }
  },
}
</script>

v-model.lazy 数据绑定懒加载焦点离开文本框是渲染
v-model.number 内容必须是数字，别的内容不会进行数据渲染（如果开始输入的是字符串则不起作用）
v-model.trim 去掉空格将数据绑定中的空格全部清除。
6.v-bind
v-bind是用来改变HTML中的标签属性来实现不同的业务逻辑。简写：，例如：href
在这里插入图片描述
7.v-pre & v-cloak & v-once