vue中的插值表达式和指令

原创已于 2023-04-15 10:48:23 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-04-07 15:43:34 首次发布

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文主要复习Vue.js相关知识，介绍了插值表达式和多种指令。详细对比了v-show和v-if在控制方法、编译条件、性能消耗上的差别，说明了v-for遍历数组或对象的使用要点、key的原理及与v-if连用的问题，还讲解了v-html、v-bind、v-model等指令的功能和用法。

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

1.插值表达式{{}}

/**
 * 1. 插值表达式: Vue中使用双大括号语法"{{  }}"
 * 2. 在{{  }}之间可以写变量和一些简单的js运算,但是不支持语句和流控制
 * 3. 
 */
 <div>{{message}}</div>
 <div>{{count / 10}}</div>
 <script>
 	export default{
		data() {
			return {
				message: "Hello World!",
				count: 100
			}
		}
	}
 </script>

2.vue中的指令

v-show v-if 在本方法中使用showBtn方法改变isshow的值，让hello world这个标签隐藏或者显示

同理 v-if也是使用变量来控制标签是否显示

 <div id="app">
        <div v-show="isShow">
            hello world
        </div>
        <h1>用户名：{{name}}</h1>
        <h2 v-if="isVip">用户类型:VIP</h2>
        <h2 v-else>用户类型:普通用户</h2>
        <!-- v-if和v-else之间不能有其他元素 -->
        <!-- v-if可以写变量 也可以写判断表达式 -->
        <button @click="showBtn">切换显示内容</button>
    </div>

let app=new Vue({
    el:"#app",
    data:{
        name:"小红",
        isVip:true,
        isShow:true
    },
    methods:{
        showBtn:function(){
            app.isShow=!app.isShow;
        }
    }
})

（由于是复习，不得不说下面试问题 v-if和v-show的差别）

相同点：都能控制元素在页面是否显示

不同点：

（1）控制方法：v-show隐藏元素是在元素上加css-display：none,dom元素依旧在。v-if则是将dom整个删除了

（2）编译条件：v-if是真正的条件渲染，会确保在切屏过程中条件块内的事件监听器和子组件适当地被销毁和重建。当渲染条件为假时，并不做操作，直到为真才渲染。

v-show false变true的时候都不会触发生命周期

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mount钩子函数，true变成false的时候触发组件的beforeDestory、destory方法

（3）性能消耗：v-if有更高的切换消耗；v-show有更高的初始值渲染；

如果直接操作dom节点增加与删除，如果需要非常频繁的切换，则使用v-show较好

如果运行时条件很少改变，使用v-if较好。

 <div id="app">
        <h3 v-if="tab==1">首页</h3>
        <h3 v-if="tab==2">新闻页</h3>
        <h3 v-if="tab==3">中心</h3>
    <button @click="tabChange" data-id="1">首页</button>
    <button @click="tabChange" data-id="2">新闻业</button>
    <button @click="tabChange" data-id="3">中心</button>
 </div>

 let app=new Vue({
        el:"#app",
        data:{
            tab:1
        },
        methods:{
            tabChange:function(e){
                // e是事件对象
                // console.log(e)
                let tabid=e.target.dataset.id
                this.tab=tabid
            }
        }
    })

点击可切换页面元素,用tab变量控制元素是否显示

v-for

vue中可以对数组或者对象遍历

1.数组遍历可以使用 item in list,对象遍历可以使用item of list

2.对于每个item使用key时，不推荐使用index索引作为唯一值，而是推荐使用后台返回的唯一值，如果id可以唯一标识数据的值，可以有效提高性能，且防止在循环列表时带有文本框的错误情况。

3.对于循环渲染列表，直接改变数组的数据不会更新到页面上，可以直接使用push,pop,shift,unshift,splice,sort,reverse方法修改数组的内容实现页面的更新，或者修改数组对象的引用。因为是vue中的这些方法，是对于数组中的方法的包裹，然后再实现虚拟dom的生成。

4.使用template标签来包裹列表，该标签不会被渲染到页面上

5.处理数组对象进行更新可以重新渲染视图，Vue提供了一个Vue.set||Vue.$set()对对象进行更新的方法也提供了可以实现更新后的同步到视图，更新数组可以写成 vue.$set(arr,index,value)形式。如果直接修改单独的一项数据，而没有使用vue中操作数据的方法，则监听不到变化。

v-for循环列表需要使用key的原理是：

Vue底层实现页面节点数据更新渲染的Diff算法需要保证节点的高可复用性，如果不添加key的唯一标识，那么每次的组件更新都将会造成列表节点的重新渲染导致节点性能不必要的渲染，而不推荐使用index的原因是在列表渲染时，在Diff的过程中，如果每次更新列表导致索引变动也会造成不必要更新。

 <div id="app2">
        <ol>
            <li v-for="(num,index) in list" :key="index"></li>
        </ol>
    </div>

let app2=new Vue({
        el:"#app2",
        data:{
            list:[
               {
                   num:1
                },
               {
                   num:2
                },
               {
                   num:3
               }
            ]
        }
    })

v-for和v-if不能连用的情况，v-for的优先级会高于v-if，所以嵌套使用的话，每个v-for的渲染的列表都会执行v-if造成不必要的计算，影响整体性能，此时可以在v-for外层套一个template标签来处理v-if，或者使用computed计算属性来规避v-if

<template v-if={{showActive}}>
	<div v-for="item in list" :key="item.id">{{ item.value }}</div>
</template>

v-html

    <h1 v-html="htmlTxt"></h1>
    htmlTxt:'<span>hello</span>',

但是v-html可以渲染一个html文本字符串，但是在使用html之后会覆盖掉该节点内部元素的子元素节点。v-html存在xss风险。

v-bind

可以用来绑定样式，可以实现数据的单项绑定，数据流向页面。

  <div id="app">
      <div :class="{active:'isTrue'}"></div>
  </div>

 var app=new Vue({
     el:"#app",
     data:{
     isTrue:"true",
 })

v-model

可以用来数据的双向绑定。数据流向页面，页面流向数据。用于表单元素。

<body>
    <div id="app">
        <input type="text" v-model="value" >
    </div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            value:"hello world",
        }
    })
</script>

例如上述代码使用v-model=“value”实现数据的绑定。当value改变时，页面中的文本框中的数据也会改变，当用户输入文本框时，对应的value也能获取到文本框中的最新值。

1. type="text"

  <form action="">账号：<input type="text" v-model="user.account" /></form>

v-model收集的就是value值，用户输入的就是value值

2.type="radio"

<form action="">
      性别：
      男<input type="radio" v-model="user.sex" value="male"/>
      女<input type="radio" v-model="user.sex" value="female"/>
      </form>

v-model收集的是value值，但是需要配置value值

3.type="checkbox"

<template>
  <div class="hello">
  
    <form action="">
      爱好：
      羽毛球<input type="checkbox" v-model="user.hobby" value="badminton" />
      跑步<input type="checkbox" v-model="user.hobby" value="run" />
      </form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      user: {
        hobby:[],
      },
    };
  },
};
</script>

如果没有配置checkbox中value属性，那么如果勾选则是true，不勾选false

如果配置了checkbox中的value属性，则根据绑定的初始值状态

（1）如果初始值是非数组，那么就是获取值为布尔值，勾选true或者不勾选false

(2）如果初始值为数组，那么就是获取值为数组

v-model:有三个修饰符

lazy:失去焦点再收集数据

trim：去除掉字符串的空白符

number:输入字符串转为数字

<template>
  <div class="hello">
  
    <form action="">
      年龄<input type="number" v-model="user.age">
      </form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      user: {
        age:22,
      },
    };
  },
};
</script>

首先设置age初始值为number,但是页面上可以输入数字修改数据。此时age会变成数组

type为number再配合使用number修饰符

  年龄<input type="number" v-model.number="user.age">

number修饰符可以将字符串转为数字类型