vue2中的一些内置指令

最新推荐文章于 2025-08-22 11:48:13 发布

她敲级凶的

最新推荐文章于 2025-08-22 11:48:13 发布

阅读量482

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js css 前端开发语言 javascript

本文链接：https://blog.csdn.net/weixin_52350720/article/details/136603581

本文详细介绍了Vue.js中常用的内置指令，如v-bind进行数据绑定，v-for实现数组遍历，v-on绑定事件，以及v-show/v-if、v-else-if/v-else的条件控制。此外，还讨论了v-model双向数据绑定，文本指令v-text和v-html的区别，以及v-cloak、v-pre和v-once的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、内置指令。

之前在js学习过的一些指令：
v-bind ：动态绑定属性简写形式为：
v-for：用来循环数组、对象、数组、指定次数
v-on：绑定事件监听，简写@
v-show：动态控制节点是否展示
v-if：和js一样都是用来判断的
v-else-if：和js一样都是用来判断的
v-else：和js一样都是用来判断的
具体写法如下

二、一些语法的用法

1.v-bind
单向数据绑定,由data流行页面

  <div id="app" :style="{fontSize: '50px'}">{{message}}</div>

2.v-for
注：key需要唯一值

<div id="app" v-bind:style="{fontSize: '50px'}">{{message}}
    <p v-for="(item, index) of arr" :key="item">
      {{item}}---{{index}}
    </p>
  </div>

3.v-on

 <div id="app" v-bind:style="{fontSize: '50px'}">{{message}}
    <p v-for="(item, index) of arr" :key="item">
      {{item}}---{{index}}
    </p>
    <button @click="func()"></button>
  </div>

4.v-show
d如果是真就显示，否则隐藏

    <p v-if="d>10">2222</p>
    <p v-else-if="d<10">333</p>
    <p v-else>333</p>

5.v-if
和show最大的区别就是，show是隐藏，if是不存在

   <p v-if="d>10">2222</p>
    <p v-else-if="d<10">333</p>
    <p v-else>333</p>

6.v-else-if

<p v-if="d>10">2222</p>
    <p v-else-if="d<10">333</p>
    <p v-else>333</p>

7.v-else

<p v-if="d>10">2222</p>
    <p v-else-if="d<10">333</p>
    <p v-else>333</p>

8.v-model
双向数据绑定，由data流向页面或页面(用户输入)流向data

<input type="text" :value="nulls">
    <input type="text" v-model="nulls">
    <button @click="func1()">点击</button>

三、指令

v-text：会覆盖元素的内容，只读文本，不读标签插值会进行拼接
v-htm：会覆盖元素的内容，读取标签注：一定不要在用户提交时使用v-html

          <div v-text="tex">1111</div>
    	<div v-hmtl="tex">2222</div>

v-cloak
用于解决页面闪烁或白屏导致显示的插值{{***}}

	<style>
          [v-cloak]{
            display: none;
        }
  </style>

v-pre
可以跳过插值或指令不加载

    <p v-pre>{{tex}}</p>

v-once
只加载一次，静态内容，因为不会修改值所以优化了性能

    <p v-onec>{{tex}}</p>

还有个自定义指令，现在up还不会

以上就是我的总结，以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
          [v-cloak]{
            display: none;
        }
  </style>
</head>
<body>
  <div id="app" v-bind:style="{fontSize: '30px'}">{{message}}
    <p v-for="(item, index) of arr" :key="item+index">
      {{item}}---{{index}}
    </p>
    <button @click="func()"></button>
    <p v-show="d>10">1111</p>
    <p v-if="d>10">2222</p>
    <p v-else-if="d<10">333</p>
    <p v-else>333</p>
    <input type="text" :value="nulls">
    <input type="text" v-model="nulls">
    <button @click="func1()">点击</button>
    <hr>
    <table border="1" width="100%" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
    <div v-text="tex">1111</div>
    <div v-hmtl="tex">2222</div>
    <p v-pre>{{tex}}</p>
    <p v-onec>{{tex}}</p>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  Vue.config.productionTip = false;
  var vm = new Vue({
    data(){
      return{
        tex:"<p>测试<P>",
        message: "欢迎学习Vue",
        nulls:"苏七且黑化",
        d:"ssss",
        arr:{
          name:"张三",
          age:18,
          sex:"男"
        }
      }
    },
    // 用来处理函数  methods
    methods:{
      func1(){
        console.log(this.nums);
      }
    }
  })
  vm.$mount("#app");
</script>
</html>