Vue 指令使用

目录

1.内容渲染指令 v-text v-html

2.属性绑定指令 v-bind:

3.事件绑定指令 v-on

4.双向数据绑定 v-model

5.条件渲染指令 v-if v-show

6.列表渲染指令 v-for

---

1.内容渲染指令 v-text v-html

v-text用于渲染DOM元素的文本内容，如果文本内容包含html标签，那么浏览器不会对其进行解析。

v-html用于渲染DOM元素的html内容，且其中的html标签会被浏览器解析。

<template>
<div v-text="message"></div>
</template>

<script setup>
const message ='<span>咬定青山不放松</span>'
</script>
<style scoped></style>

<template>
<div v-html="message"></div>
</template>

<script setup>
const message ='<strong>千磨万击还坚韧</strong>'
</script>
<style scoped></style>

2.属性绑定指令 v-bind:

v-bind实现了单向数据绑定，当改变数据名的值时，属性值会自动更新；而当属性值改变时，数据名的值不回同步发生改变。另外，v-bind还可以简写成'：属性名'。

<template>
<p><input type="text" v-bind:placeholder="username"></p>
<p><input type="password" v-bind:placeholder="password"></p>
</template>

<script setup>
const username ='请输入用户名'
const password ='请输入密码'
</script>
<style scoped></style>

3.事件绑定指令 v-on

v-on用于给DOM元素绑定事件，可以将“v-on：事件名”简写为“@事件名”

<template>
<button @click="show">输出信息</button>
</template>

<script setup>
const show =()=>{
  console.log("欢迎来到Vue.js的世界！")
}
</script>
<style scoped></style>

4.双向数据绑定 v-model

在处理表单信息时，经常需要将输入框的值与变量保持同步。Vue提供了v-model指令来实现双向绑定，使用它可以在input、textarea、select元素上创建双向绑定，它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。

v-model提供了三个修饰符：

修饰符	作用
.number	自动将用户输入的值转换为数字类型
.trim	自动过滤用户输入的首尾空白字符串
.lazy	在change事件而非input事件触发时更新数据

<template>
请输入用户名：<input type="text" v-model="user">
<div>用户名是：{{user}}</div>
</template>

<script setup>
import { ref } from "vue";

const user = ref('zhangsan')
</script>
<style scoped></style>

5.条件渲染指令 v-if v-show

v-if是根据布尔值切换元素的显示和隐藏状态。

v-show 与 v-if都用于决定某一个元素是否在页面上显示出来。

v-show的原理是通过为元素添加或移除display:none样式来实现的显示或隐藏。

当需要频繁切换某一个元素的显示或隐藏状态时，使用v-show会更节省性能开销；而当只需要切换一次显示或隐藏状态时，使用v-if更合理。

<template>
小铭的学习评定等级：
<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else>差</p>
<button @click="type='A'">切换成优秀</button>
<button @click="type='B'">切换成良好</button>
<button @click="type='C'">切换成差</button>
</template>

<script setup>
import { ref } from "vue";
const type = ref('A')
</script>
<style scoped></style>

<template>
<p v-if="flag">通过v-if控制元素</p>
<p v-show="flag">通过v-show控制元素</p>
<button @click="flag = ! flag">显示/隐藏</button>
</template>

<script setup>
import { ref } from "vue";
const flag = ref(true)
</script>
<style scoped></style>

6.列表渲染指令 v-for

在开发购物应用时，为了方便用户查找商品信息，通常会以商品列表的形式展示商品信息。在商品列表中，每件商品的结构都是相同的，如果每件商品的结构都要手动定义，会非常麻烦。为此，Vue 提供了列表宣染指令v-for。开发者只需在模板中定义一件商品的结构，v-for便会根据开发者提供的数据自动渲染商品列表中所有的商品。
使用v-for 可以辅助开发者基于一个数组、对象、数字或字符串来循环渲染一个列表。

<template>
<div v-for="(item,index) in list" :key="index">
  索引是{{index}}————元素内容是：{{item}}
</div>
</template>

<script setup>
import { reactive, ref } from "vue";
const list = reactive(['html','css','javascript','java'])
</script>
<style scoped></style>