vue指令整理

孙景荣

已于 2023-02-01 14:15:12 修改

阅读量159

点赞数 1

分类专栏： vue2 文章标签： vue.js javascript 前端 html css

于 2022-10-06 22:31:13 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127188662

版权

vue2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、vue指令整理

v-cloak 解决浏览器在加载页面时因存在时间差而产生的闪动问题
v-text 填充纯文本，相当于之前原生的innerText
v-html 填充HTML片段，相当于原生innerHTML
v-once 只渲染元素或组件一次，之后元素或组件将失去响应式
v-bind 可以给元素动态设置属性，v-bind:属性名= ‘变量’ ; 简写方式 :属性名= ‘变量’
v-on 可以给元素绑定事件，语法: v-on:事件名= ‘方法’ 简写: @事件名=‘方法’
v-for 循环指令
v-if，v-else，v-else-if 分支指令，控制元素是否渲染
v-show 控制元素是否显示（已经渲染，display:none;）

二、代码演示

v-cloak: 加在了<div id="app" v-cloak>，解决闪动问题；
v-text: ，直接渲染link这个字符串
v-html: ，将link这个字符串作为html渲染
v-once: {{msg}}，msg只渲染一次
v-bind: ，将msg作为变量赋值给id属性
v-on: 点击事件，@click是点击事件
v-for: v-for="(item,index) in nameArr"
v-if，v-else，v-else-if: v-if="item.id != 1"

<!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="js/vue.js"></script>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <p v-cloak>{{msg}}</p>
      <p v-text="link"></p>
      <p v-html="link"></p>
      <p v-once>{{msg}}</p>
      <p :id="msg"></p>
      <p :id="num"></p>
      <p @click="handelClick">点击事件</p>
      <p @mouseenter="mouseEnter">鼠标移入事件</p>
      <ul>
        <li v-for="(item,index) in nameArr" :key="item.id" v-if="item.id != 1">
          {{item.name}}
        </li>
      </ul>
    </div>
  </body>
</html>

<script>
  setTimeout(() => {
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "hello js",
        num: 9,
        link: '<a href="https://www.baidu.com"> 百度一下</a>',
        nameArr: [
          { id: 1, name: "古力娜扎" },
          { id: 2, name: "刘诗诗" },
          { id: 3, name: "刘亦菲" },
        ],
      },
      methods: {
        handelClick() {
          document.write("你点我了");
        },
        mouseEnter() {
          document.write("鼠标移入了");
        },
      },
    });
  }, 1000);
</script>