目录

概念

作用

分类

内容渲染指令

属性绑定指令

事件绑定指令

条件渲染指令

v-if/v-else-if/v-else多分支渲染 

v-show和v-if的区别 

列表渲染指令

v-for中的key属性 

双向绑定指令 

示例：图片切换

示例：可折叠面板

示例：书架列表

---

概念

作用在标签上，以v-开头的属性，是vue提供的一种特殊语法

作用

增强标签渲染数据的能力

分类

1. 内容渲染指令：作用类似于插值，把表达式的结果渲染到双标签
2. 属性绑定指令：把表达式的值于标签的属性动态绑定
3. 事件绑定指令：用来于标签进行事件绑定，处理用户交互
4. 条件渲染指令：根据表达式的true或false，决定标签是否展示
5. 列表渲染指令：基于数组循环生成一套列表
6. 双向绑定指令：数据与视图相互影响

内容渲染指令

• v-html="表达式"，会解析标签，类似于innerHtml
• v-text="表达式"，不会解析标签，作用与{{表达式}}一样

使用示例：

<template><p v-html="str"></p><p v-text="str"></p>
</template><script setup>import { ref } from 'vue'const str=ref('<span style="color:red">Hello World</span>')
</script>

效果如下：

属性绑定指令

v-bind用于把vue表达式的值与标签的属性动态绑定。

语法：

v-bind:属性名="表达式"

简写：

：属性名=“表达式” 

代码： 

<template><div title="{{ str }}">hello-1</div><div v-bind:title=" str ">hello-2</div>
</template><script setup>import { ref } from 'vue'const str=ref('paragraph')
</script>

效果：

如下便是使用v-bind绑定标签属性和不使用直接使用插值的区别：

事件绑定指令

v-on可以简写@

作用：与DOM元素进行事件绑定/处理

语法：

第一种：

v-on:事件名=“内联代码”

<template>
<div><p>{{ count }}</p><button v-on:click="count++">+1</button>
</div>
</template><script setup>import { ref } from 'vue'   const count=ref(0)
</script>

第二种：

v-on:事件名=“处理函数”

<template>
<div><p>{{ count }}</p><button v-on:click="increce">+1</button>
</div>
</template><script setup>import { ref } from 'vue'   const count=ref(0)const increce = () => {count.value++}
</script>

第三种：

v-on:事件名=“处理函数（实参列表）”

条件渲染指令

v-show和v-if/v-else-if/v-else

作用：

根据vue表达式值是true还是false，决定某个元素是显示还是隐藏

语法：

v-show="布尔表达式"

v-if="布尔表达式" 

<button v-show="false">+1</button>

v-if/v-else-if/v-else多分支渲染 

    <div v-if="mark >= 85">优秀</div><div v-else-if="mark >= 75">良好</div><div v-else-if="mark >= 60">及格</div><div v-else>不及格</div>

v-show和v-if的区别 

控制元素显示或隐藏的原理不同：

• v-show：是通过控制元素css的display属性控制元素显示或隐藏的
• v-if：是通过创建和插入元素或移除DOM元素控制元素显示或隐藏的

如果频繁的控制元素显示或者隐藏，推荐使用v-show，否则使用v-if

列表渲染指令

v-for作用：基于数组/对象/数字 循环生产列表

语法：

想循环谁，就给谁添加v-for

<li v-for="(值变量，下标变量) in 数组"> </li>  // ()括号可加可不加

使用示例：

<template>
<div><ul><li v-for="num,index in nums">{{ num }}=>{{ index }}</li></ul>
</div>
</template><script setup>import { ref } from 'vue'const nums=ref([11,22,33,44,55])
</script>

v-for中的key属性 

添加key属性，作用是提高vue再更新列表时的更新性能

语法：

:key="不重复的唯一值"

原理：vue内部尽可能保持DOM的复用 ，不去创建新的或更新DOM，加key且为id，通过key来标明当前元素是否发生了变化，如果key不变，vue直接复用之前的DOM.

key的类型：只能是数字或字符串

key的选用：首选id其次下标

如下:

未加key前，删除后，需要重新渲染如下标灰的地方

加key后

双向绑定指令 

v-model

所谓双向，就是数据和视图之间的关系，当数据变了，视图也会变（数据驱动视图的思想），当视图变了，数据也会变化。

作用：

经常用在表单元素上，比如输入框、下拉列表、单选框、复选框、文本框等

用于实现数据和标签value属性的双向绑定，进而可以快速收集表单数据

使用实例：

<template><div class="login-box">账户：<input type="text" v-model="loginForm.username" placeholder="Username">密码：<input type="password" v-model="loginForm.password" placeholder="Password"></div>
</template><script setup>
import { reactive } from 'vue'
const loginForm = reactive({username: '',password: ''
})
</script>

---

示例：图片切换

<script setup>import { ref } from 'vue'// 声明图片路径数组const imgList = ['https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif','https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif','https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif','https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif','https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png','https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png']
//声明响应式下标，初始值为0
const index = ref(0)
</script>
<template><div><button @click="index--" v-if="index>0">上一页</button></div><img :src="imgList[index]" alt="img" /><div><button @click="index++" v-if="index<imgList.length-1">下一页</button></div>
</template><style>
#app {display: flex;width: 500px;height: 240px;
}img {width: 240px;height: 240px;
}#app div {flex: 1;display: flex;justify-content: center;align-items: center;
}
</style>

示例：可折叠面板

<template><h3>可折叠面板</h3><div class="panel"><div class="title"><h4>自由与爱情</h4><span class="btn" v-on:click="flg=!flg">{{flg?'收起':'展开' }}</span></div><div class="container" v-show="flg"><p>生命诚可贵，</p><p>爱情价更高。</p><p>若为自由故，</p><p>两者皆可抛。</p></div></div>
</template><script setup>import { ref } from 'vue';const flg=ref(true);
</script><!-- 如果指明了lang="scss",项目运行不起来，需要安装sass模块，命令行执行：npm install sass -g 或者  pnpm add -D sass-embedded -->
<style lang="scss">body{background: #ddd;}#app{width:400px;margin: 20px auto;padding: 1em 2em 2em;border:4px solid green;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0,0,0,0.5);background: #fff;h3{text-align: center;}}.panel{.title{display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding:0 1em;h4{margin: 0;line-height: 2;}.btn{cursor: pointer;}}.container{border: 1px solid #ccc;padding:0 1em;}}
</style>

示例：书架列表

<template><h3>书架</h3><ul><li v-for="item,index in bookList"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="onDel(index)">删除</button></li></ul>
<div></div>
</template><script setup>import { ref } from 'vue'const bookList = ref([{id:1,name:'红楼梦',author:'曹雪芹'},{id:2,name:'三国演义',author:'罗贯中'},{id:3,name:'西游记',author:'吴承恩'},{id:4,name:'水浒传',author:'施耐庵'},])const onDel = (index) => {if(window.confirm('确认删除该书籍吗？')){bookList.value.splice(index,1)}}
</script><style>#app{width: 400px;margin: 100px auto;}ul{list-style: none;}ul li{display: flex;justify-content: space-around;padding:10px 0;border-bottom: 1px solid #ccc;}
</style>