vue常用指令

最新推荐文章于 2024-09-13 14:34:15 发布

听?闻

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量65

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_65591699/article/details/126937872

版权

v-html 可以把html的内容填充到标签中去，会解析标签常用于渲染富文本
v-text 用于将数据填充到标签中去，作用类似于插值表达式不会解析标签
v-on 用来进行事件的绑定简写为@
v-bind 动态绑定属性简写为：
v-if 判断是否创建或销毁dom元素
v-else 给 v-if 添加一个“else”块，必须跟在 v-if 之后
v-show 通过css的display：none来隐藏元素
v-model 数据双向绑定
v-for 循环
v-pre 显示指令中原始信息，静态的内容不需要编译，可以加快渲染【跳过插值解析】
v-once 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
v-cloak 防止页面加载闪烁

v-on的使用
  <div class="home">
    <h1>{{ num }}</h1>
    <button @click="num++">加一</button>
    <button v-on:click="num++">num++</button>
  </div>
v-bind的使用
<template>
  <div class="home">
    <h1
      v-bind:style="'color:' + (num < 3 ? 'black' : num < 5 ? 'red' : 'pink')"
    >
      {{ num }}
    </h1>
    <h2 :class="num < 3 ? 'blackcolor' : num < 5 ? 'redcolor' : 'pinkcolor'">
      {{ num }}
    </h2>
    <h3
      :class="{
        blackcolor: num < 3,
        redcolor: num >= 3 && num < 5,
        pinkcolor: num >= 5,
      }"
    >
      {{ num }}
    </h3>
    <button @click="num++">加一</button>
    <button v-on:click="num++">num++</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
};
</script>
<style lang="scss" scoped>
.balckcolor {
  color: black;
}
.redcolor {
  color: red;
}
.pinkcolor {
  color: pink;
}
</style>

v-if的使用 
 
    <h1> {{ num }} </h1>
    <h1 v-if="num < 3">num小于3</h1>
    <h1 v-else-if="num < 5">num小于5</h1>
    <h1 v-else>num大于5</h1>
    <button @click="num++">加一</button>
    <button v-on:click="num++">num++</button>
 v-if与v-show的区别
都是控制元素的显示和隐藏的，

v-if通过动态的  删除或者添加元素来实现元素的显示和隐藏

v-show是通过  css 的display：none来隐藏元素

拓展       v-cloak的使用

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <style>
        #app {
            text-align: center;
        }
 
        [v-cloak] {
            display: none;
        }
        /* v-cloak可以用作属性选择器，将{{num}}解析前隐藏，当解析渲染后会将v-cloak清除，内容就显示出来了 */
    </style>
</head>
 
<body>
    <div id="app">
        <p v-cloak>{{num}}</p>
        <!-- 页面渲染先执行标签内容渲染，将标签内的{{num}}渲染而不是插值渲染，这便是页面闪烁 -->
    </div>
</body>
<script>
 
    setTimeout(() => {
        new Vue({
            el: '#app',
            data: {
                num: 0
            }
        })
    }, 2000)
</script>
 
</html>