Vue学习：1.V标签综合1

认识V标签

目录

认识V标签

v-text:

v-html:

v-bind (缩写为 :):

v-if / v-else / v-else-if:  

v-show:

v-for:

v-model:

---

Vue.js 中常用的 v- 前缀标签（指令）包括但不限于以下几种：

1. v-text:

   • 用法：<span v-text="expression"></span>
   • 功能：根据表达式 expression 的值更新元素的文本内容。它与双大括号插值 {{ }} 类似，但不会解析其内容作为 HTML，而是直接作为纯文本输出，有助于防止潜在的 XSS 攻击。

2. v-html:

   • 用法：<div v-html="expression"></div>
   • 功能：将表达式 expression 的值作为 HTML 片段插入元素内部。注意，这会覆盖元素原有的内容，并且可能带来安全风险，如果 expression 的值包含不受信任的用户输入，务必确保做好 HTML 渲染的安全处理。

3. v-bind (缩写为 :):

   • 用法：<a :href="url">Link</a> 或 <input :value="inputValue">
   • 功能：动态绑定一个或多个属性到表达式。它可以用于绑定各种属性，如 class、style、src、href、value 等。支持对象语法（如 v-bind="{ attr1: value1, attr2: value2 }"）和动态属性名（如 v-bind:[dynamicAttr]="expression"）。 

4. v-on (缩写为 @):

   • 用法：<button @click="handleClick">Click me</button> 或 <input @keyup.enter="onEnterKeyPressed">
   • 功能：绑定事件监听器。事件名称（如 click、input、keyup 等）紧跟在 v-on 后面，事件处理器是表达式。支持事件修饰符（如 .stop、.prevent、.capture、.self、.once 等）以改变原生事件的行为。

5. v-if / v-else / v-else-if: 

   • 用法：

     <div v-if="condition">
       <!-- 显示条件为 true 时的内容 -->
     </div>
     <div v-else-if="anotherCondition">
       <!-- 显示另一个条件为 true 时的内容 -->
     </div>
     <div v-else>
       <!-- 当以上条件均不满足时显示的内容 -->
     </div>

   •   功能：基于表达式 condition 的布尔值有条件地渲染元素。v-else 和 v-else-if 作为辅助分支与 v-if 结合使用，提供更复杂的条件逻辑。

6. v-show:

   • 用法：<div v-show="expression">Content</div>
   • 功能：基于表达式 expression 的布尔值控制元素的显示/隐藏。与 v-if 不同的是，v-show 通过 CSS 的 display 属性切换元素可见性，而非完全移除/添加元素，因此有更高的切换性能开销但首次渲染更快。

7. v-for:

   • 用法：<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
   • 功能：遍历数组或对象（需要使用 v-bind:key 提供唯一键），根据循环变量（如 item 和 index）生成重复的DOM元素。

8. v-model:

   • 用法：<input v-model="inputValue"> 或 <textarea v-model="textAreaContent"></textarea>
   • 功能：实现双向数据绑定，在表单元素（如输入框、复选框、单选框、选择框等）与 Vue 实例的数据属性之间自动同步值。支持修饰符（如 .trim、.number、.lazy 等）以定制绑定行为。

V标签综合使用：图片切换案例

实现功能：

创建一个图片展示框，配有两个按钮：前后切换。点击任一按钮，相应切换上一张或下一张图片。当显示首张图片时，前向切换按钮隐藏；当显示末张图片时，后向切换按钮消失。

思路：

“点击按钮切换图片”实质是修改当前显示框里图片的索引；“按钮隐藏”可根据当前显示图片在数组中的位置索引使用v-show来判断显示还是隐藏。

代码：

html：

<div id="app">
        <button v-show="index > 0" @click="index--">上一页</button>
        <img :src="list[index]" alt="" width="200px">
        <button v-show="index < list.length - 1" @click="index++">下一页</button>
</div>

js: 

<script>
        const app = new Vue({
            el: '#app',
            data: {
                index: 0,
                list: ['../aaa/1.jpg',
                       '../aaa/2.jpg',
                       '../aaa/3.jpg',
                       '../aaa/4.jpg']
            }
        }) 
</script>

var code = "46cce7a2-feb3-40be-97b6-5b9fa77b0d65"