谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定


本节的主要内容是学习几个绑定指令:

  • 插值表达式
  • v-html
  • v-text
  • v-model
  • v-bind

一,插值表达式

插值表达式是一种用于在模板中动态插入数据的方法。

插值表达式允许在双大括号 {{ }} 中嵌入 JavaScript 表达式,Vue 会自动解析这些表达式并将结果渲染到 DOM 中。这种方式主要用于展示或计算数据,而不涉及复杂的逻辑处理。

插值表达式的使用非常直接,你只需在模板中需要显示动态数据的地方使用双大括号即可。例如:

<p>{{ message }}</p>

在上面的例子中,{{ message }} 就是一个插值表达式,它会显示 Vue 实例中 message 属性的值。

插值表达式可以包含任何合法的 JavaScript 表达式,包括变量、函数调用、算术运算等。例如:

<p>{{ price * quantity }}</p>

在这个例子中,插值表达式 {{ price * quantity }} 会显示 pricequantity 属性相乘的结果。

注意事项1:不适合复杂的逻辑处理

需要注意的是,尽管插值表达式可以包含表达式,但不适合复杂的逻辑处理。对于复杂的逻辑,Vue 推荐使用计算属性(computed properties)或方法(methods),这样可以让模板保持清晰,将复杂逻辑分离到更合适的地方。

注意事项2:插值表达式支持文本拼接

此外,插值表达式支持文本拼接,可以通过加号或字符串模板字面量实现:

<p>{{ firstName + ' ' + lastName }}</p>

<p>{{ `${firstName} ${lastName}` }}</p>

以上就是 Vue 中插值表达式的基本概念和使用方式。它为数据驱动的 UI 提供了简单而强大的工具,使得开发者可以轻松地将数据绑定到视图中。

注意事项3:插值表达式只能在标签体中

插值表达式只能在标签体中。

<p>{{ message }}</p>

不能用在标签属性中,下面用法是错误的。

<p color="{{color}}">标签属性中使用插值表达式是错误用法,不能达到预期目的</p>

二,v-html和v-text

在 Vue.js 中,v-htmlv-text 都是用来将数据插入到 DOM 中的指令,但它们的使用场景和处理方式有所不同。

v-text

v-text 指令用于将数据作为纯文本插入到 DOM 节点中。它会替换整个节点的文本内容,而不会解析 HTML 标签。这通常用于安全地插入文本数据,避免潜在的 XSS(跨站脚本)攻击。

用法示例:

<div v-text="greeting"></div>

在 Vue 实例中:

let vm = new Vue({
   el: '#app',
   data: {
       greeting: '<strong>Hello, Vue!</strong>'
   }
})

这段代码会将 “Hello, Vue!” 插入到 div 中,但不会将其解析为 HTML,即使 greeting 包含 HTML 标签。

在这里插入图片描述

v-html

相比之下,v-html 指令会将数据作为 HTML 插入到 DOM 中,也就是说,如果数据中包含 HTML 标签,这些标签会被解析并显示为实际的 HTML 元素。这通常用于需要动态生成 HTML 结构的情况,但同时也增加了安全风险,因为未经适当清理的 HTML 数据可能包含恶意脚本。

用法示例:

<div v-html="greeting"></div>

在 Vue 实例中:

let vm = new Vue({
   el: '#app',
   data: {
       greeting: '<strong>Hello, Vue!</strong>'
   }
})

这段代码会将 <strong>Hello, Vue!</strong> 解析为 HTML,并显示加粗的文本 “Hello, Vue!”。

在这里插入图片描述

区别总结:

  • 安全性v-text 更安全,因为它总是将数据作为纯文本插入,不解析 HTML。v-html 则可能引发安全问题,因为它会解析并渲染 HTML 标签。
  • 用途v-text 适用于插入文本数据,而 v-html 适用于插入需要被解析为实际 HTML 的数据。
  • 处理 HTML 标签v-text 忽略 HTML 标签,将其视为普通文本;v-html 则会解析并显示 HTML 标签。
  • 二者都是单向绑定,元素绑定model,model不绑定元素,元素值改变时model值不会更新。

最佳实践

在实际开发中,推荐尽可能使用 v-text,并在确实需要动态生成 HTML 时才使用 v-html,同时确保插入的数据经过了适当的清理和验证,以防止 XSS 攻击。

三,v-model

v-model 是 Vue.js 中用于实现表单输入和其他 UI 控件与数据双向绑定的指令。它简化了数据绑定的过程,使得数据模型和用户界面能够实时同步。下面是 v-model 的一些用法示例及注意事项:

复选框

<!-- 在复选框中使用 v-model -->
<label for="checkA">Java</label>
<br>
<input type="checkbox" id="checkB" value="PHP" v-model="language">
<label for="checkB">PHP</label>
<br>
<input type="checkbox" id="checkC" value="Python" v-model="language">
<label for="checkC">Python</label>
<p>选中的有:{{language.join(',')}}</p>
let vm = new Vue({
   el: '#app',
   data: {
       language: ['Java','PHP']
   }
})

在这里插入图片描述

对于复选框,v-model 通常绑定到一个数组,数组中的值代表被选中的复选框。

在这里插入图片描述

文本输入框

<!-- 在文本输入框中使用 v-model -->
<input v-model="message" placeholder="编辑我">

在这个例子中,message 数据属性将被绑定到输入框的值,任何输入框中的更改都会立即反映到 message 的值上。

单选按钮

<!-- 在单选按钮中使用 v-model -->
<input type="radio" id="optionA" value="A" v-model="selectedOption">
<label for="optionA">选项 A</label>
<br>
<input type="radio" id="optionB" value="B" v-model="selectedOption">
<label for="optionB">选项 B</label>

这里,selectedOption 数据属性将被设置为用户选择的选项的值。

下拉列表

<!-- 在下拉列表中使用 v-model -->
<select v-model="selectedValue">
  <option disabled value="">请选择</option>
  <option value="A">选项 A</option>
  <option value="B">选项 B</option>
</select>

这里,selectedValue 数据属性将被设置为用户选择的选项的值。

四,v-bind

v-bind 是 Vue.js 中的一个核心指令,用于动态地将数据绑定到 HTML 元素的属性上。它可以用于绑定任何类型的属性,包括 srchrefclassstyle 等。v-bind 的语法是在属性前加上 v-bind: 或者简写为 :

基本用法

首先,来看一个基本的 v-bind 用法,绑定一个 src 属性:

<img :src="imageUrl">

假设 Vue 实例中有如下数据:

data() {
  return {
    imageUrl: 'https://example.com/image.jpg'
  }
}

那么,上述模板代码会将图片的 src 属性绑定到 imageUrl 的值上。

绑定 class 属性

v-bind:classv-bind:class 的简写 :class 允许你动态地绑定一个或多个 CSS 类。这可以是字符串或对象形式。

字符串形式

<div :class="className"></div>
let vm = new Vue({
   el: '#app',
   data: {
       className: 'active-class'
   }
})

对象形式

<div :class="{ active: isActive }"></div>
let vm = new Vue({
   el: '#app',
   data: {
       isActive: true
   }
})

在这个例子中,如果 isActivetruediv 元素将会有 active 类。

数组形式

你也可以使用数组形式来绑定多个类:

<div :class="[firstClass, secondClass]"></div>
let vm = new Vue({
   el: '#app',
   data: {
       firstClass: 'first',
       secondClass: 'second'
   }
})

绑定 style 属性

v-bind:style 或其简写 :style 用于动态地绑定 CSS 样式。它可以是字符串、对象或数组的形式。

字符串形式

<div :style="styleString"></div>
let vm = new Vue({
   el: '#app',
   data: {
       styleString: 'color: red; background-color: yellow;'
   }
})

对象形式

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
let vm = new Vue({
   el: '#app',
   data: {
       activeColor: 'red',
       fontSize: 16
   }
})

在这个例子中,div 的颜色将是 red,字体大小将是 16px

数组形式

你也可以将多个样式对象组合在一起:

<div :style="[baseStyles, extraStyles]"></div>
let vm = new Vue({
   el: '#app',
   data: {
       baseStyles: { color: 'red', fontSize: '16px' },
       extraStyles: { fontWeight: 'bold' }
   }
})

相关推荐

  1. vue 双向

    2024-07-21 20:44:02       40 阅读
  2. Vue 双向数据

    2024-07-21 20:44:02       46 阅读
  3. vue双向/小程序双向

    2024-07-21 20:44:02       47 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-21 20:44:02       141 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-21 20:44:02       155 阅读
  3. 在Django里面运行非项目文件

    2024-07-21 20:44:02       129 阅读
  4. Python语言-面向对象

    2024-07-21 20:44:02       141 阅读

热门阅读

  1. c++端的类,作为组件在qml端使用

    2024-07-21 20:44:02       27 阅读
  2. Python笔记(3)

    2024-07-21 20:44:02       27 阅读
  3. 生成表的DDL语句没有字段描述和表名描述

    2024-07-21 20:44:02       25 阅读
  4. bitset和set总结

    2024-07-21 20:44:02       19 阅读
  5. Flask校验

    2024-07-21 20:44:02       26 阅读
  6. 基带成型(脉冲成形)

    2024-07-21 20:44:02       28 阅读
  7. mysql索引篇

    2024-07-21 20:44:02       27 阅读
  8. FedAvg

    FedAvg

    2024-07-21 20:44:02      25 阅读
  9. 我在vue2重生之vite加强版

    2024-07-21 20:44:02       24 阅读
  10. 2024.7.20 暑期训练记录(6)

    2024-07-21 20:44:02       24 阅读