vue中常用的指令有什么

最新推荐文章于 2024-07-09 00:17:48 发布

厉害的明大神

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量658

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43818430/article/details/109849636

版权

Vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vue中常用的指令

/* 
     v-model='xx'：一般是用在表单元素上，input框内容发生改变，所有用到这个变量的地方都会自动更新
     v-text='xx'：相当于 innerText，不能识别结构
     v-html='xx'：相当于 innerHTML，能识别结构

     v-cloak：专门用来提供解决小胡子的显示问题，需要搭配css使用
              当vue编译完成之后，会把这个属性删掉，这是css样式就不起作用了
     v-once：有这个指令的标签只会编译一次，后期数据再变，它也不会变
     v-pre：有这个指令的标签及其后代元素，vue都不做处理（不经过vue处理），可以用来提升vue的编译效率

     v-if='true/false'：控制元素或者组件是否加载，有比较大的切换开销
     v-else：跟 v-if 或者 v-eles-if 搭配只用，且中间不能插入其他无关标签或者组件
     v-show=true/false：用来控制元素或者组件显示不显示（控制diaplay的属性），有比较大的初始加载开销

     v-for='xx in yy'：用来循环的，可以循环数组、数字、字符串、对象等。与v-if同时使用的时候，v-for的优先级要高于v-if的
        key 对vue来说，是元素的身份标识，有利于vue的diff计算
        key 在同一个for中不能重复。同一个页面或组件中想要使用相同的key值，那么key值所处的v-for不能为兄弟元素

     v-bind:prop='value'：用来处理行内属性的一个指令，简写是一个冒号 :
        行内属性中 class 和 style 是经常操作的属性，所以vue对这两个属性专门做了加强
        :class='{类名1：布尔值，类名2：布尔值，...}' 只有值为true的类才会加上
        :style="{css属性名:css属性值}"

     v-on:事件名='方法名'：专门用来绑定事件的指令，简写是：@
    */

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    [v-cloak] {
      /* 透明度设置为 0 */
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <h1 v-once>{{name}}</h1>
    <h1>{{name}}</h1>
    <input type="text" v-model="name">
    <!-- 有 v-pre 的标签，不经过vue编译 -->
    <ul v-pre>
      <li>{{name}}</li>
      <li>{{name}}</li>
      <li>{{name}}</li>
    </ul>

    <h4 v-if='1'>{{name}}</h4>
    <!-- <span>我是打酱油的</span> 加了之后就会报错 -->
    <h4 v-else>我没有</h4>

    <div>
      <p v-for="(item, index) in arr" :key="index">
        <span>{{index}}: {{item}}</span>
      </p>
      <!-- 都想将数组的索引号作为key值，那么这两个v-for就不能是兄弟关系 -->
     <!--  <p v-for="(item, index) in arr" :key="index">
        <span>{{index}}: {{item}}</span>
      </p> -->
    </div>
    <div>
      <p v-for="(item, index) in arr" :key="index">
        <span>{{index}}: {{item}}</span>
      </p>
    </div>
    <!-- 这个标签的行内属性name，属性值为 '测试' -->
    <p v-bind:name='name'>测试v-bind</p>
    <p :name='name'>测试v-bind</p> <!-- 简写 -->

    <h3 :class="{box:0, box1:1, box2:3}">测试class</h3>
    <div :style="{height: he}">{{he}}</div>
    <!-- 绑定一个全是 attribute 的对象 -->
    <div v-bind="obj">{{name}}</div>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        name: '测试',
        arr: [1,2,3,4,5,6],
        he: '30px',
      obj: {color: 'red', id:111, 'font-size': '20px'}
      },
    });
  </script>
</body>

</html>

厉害的明大神

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中常用的指令有什么

vue中常用的指令/* v-model='xx'：一般是用在表单元素上，input框内容发生改变，所有用到这个变量的地方都会自动更新 v-text='xx'：相当于 innerText，不能识别结构 v-html='xx'：相当于 innerHTML，能识别结构 v-cloak：专门用来提供解决小胡子的显示问题，需要搭配css使用当vue编译完成之后，会把这个属性删掉，这是css样式就不起作用了 v-once：有这个指令的
复制链接

扫一扫

专栏目录