GuLi商城-前端基础Vue指令-单向绑定双向绑定
什么是指令?
指令 (Directives) 是带有 `v-` 前缀的特殊特性。
指令特性的预期值是:单个 JavaScript 表达式。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM
例如我们在入门案例中的 v-on，代表绑定事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app">{{msg}} {{1+1}} {{hello()}}<br/><span v-html="msg"></span><br/><span v-text="msg"></span></div><script src="../node_modules/vue/dist/vue.js"></script><script>new Vue({el:"#app",data:{msg:"<h1>Hello</h1>",link:"http://www.baidu.com"},methods:{hello(){return "World"}}})</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 给html标签的属性绑定 --><div id="app"> <a v-bind:href="link">gogogo</a><!-- class,style {class名：加上？}--><span v-bind:class="{active:isActive,'text-danger':hasError}":style="{color: color1,fontSize: size}">你好</span></div><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{link: "http://www.baidu.com",isActive:true,hasError:true,color1:'red',size:'36px'}})</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 表单项，自定义组件 --><div id="app">精通的语言：<input type="checkbox" v-model="language" value="Java"> java<br/><input type="checkbox" v-model="language" value="PHP"> PHP<br/><input type="checkbox" v-model="language" value="Python"> Python<br/>选中了 {{language.join(",")}}</div><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{language: []}})</script></body>
</html>注意：页面上显示的是小写的java，操作的是value里面大写的Java
谷粒商城项目4——前端基础 Vue框架的属性 ES6前端编程规范学习_谷粒商城mvvm思想_HotRabbit.的博客-CSDN博客
相关文章：
GuLi商城-前端基础Vue指令-单向绑定双向绑定
什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊特性。 指令特性的预期值是:单个 JavaScript 表达式。 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM 例如我们在入门案例中的 v-on，代表绑定事…...
前端（十三）——JavaScript 闭包的奥秘与高级用法探索
😶博主：小猫娃来啦 😶文章核心：深入理解 JavaScript 中的闭包 文章目录 不理解闭包？这玩意很难？闭包的定义与原理闭包是什么创建一个闭包 闭包的应用场景闭包与作用域闭包与作用域之间的关系全局作用域、函…...
面试-快速学习计算机网络-UDP/TCP
1. OSI四层和七层映射 区别： 应用层，表示层，会话层合并为了应用层数据链路层和物理层合并为了网络接口层 2. TCP和UDP的区别？ 总结： 1 . TCP 向上层提供面向连接的可靠服务 ，UDP 向上层提供无连接不可靠服…...
爱校对如何帮助企业和博客主提高在线可见性？
在数字化时代，内容质量已经成为增强在线曝光率的关键因素。企业和博客主经常面临挑战，如何制作高质量、无误的内容以吸引更多的在线用户。此文将详细分析“爱校对”如何帮助用户优化内容，从而提高在线可见性。 1.互联网内容的挑战 搜索引擎…...
MATLAB中xlsread函数用法
目录 语法 说明 示例 将工作表读取到数值矩阵 读取元胞的范围 读取列 请求数值、文本和原始数据 对工作表执行函数 请求自定义输出 局限性 xlsread函数的功能是读取Microsoft Excel 电子表格文件 语法 num xlsread(filename) num xlsread(filename,sheet) num x…...
Prisma.js：JavaScript中的基于代码的ORM
Prisma是一种流行的用于服务器端JavaScript和TypeScript的数据映射层（ORM）。它的核心目的是简化和自动化数据在存储和应用程序代码之间的传输方式。Prisma支持各种数据存储，并为数据持久化提供了一个强大而灵活的抽象层。通过这个基于代码的…...
解决问题：在cocos create中如何从b文件调用到a文件里用CC.resource.load动态加载的图集
目录 1.在a文件中定义一个公共的变量存储动态加载的图集 2.在a.js中添加一个静态方法，返回动态加载的图集 3.在b.js中使用a.js中定义的静态方法获取图集，并使用它 假设a文件中用CC.resource.load动态加载了一张图集，b文件需要使用这张图集&am…...
分布式 - 消息队列Kafka：Kafka 消费者消费位移的提交方式
文章目录 1. 自动提交消费位移2. 自动提交消费位移存在的问题？3. 手动提交消费位移1. 同步提交消费位移2. 异步提交消费位移3. 同步和异步组合提交消费位移4. 提交特定的消费位移5. 按分区提交消费位移 4. 消费者查找不到消费位移时怎么办？5. 如何从特定…...
如何利用 ChatGPT 进行自动数据清理和预处理
推荐：使用 NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 ChatGPT 已经成为一把可用于多种应用的瑞士军刀，并且有大量的空间将 ChatGPT 集成到数据科学工作流程中。 如果您曾经在真实数据集上训练过机器学习模型，您就会知道数据清理和预…...
PHP“牵手”淘宝商品评论数据采集方法,淘宝API接口申请指南
淘宝天猫商品评论数据接口 API 是开放平台提供的一种 API 接口，它可以帮助开发者获取商品的详细信息，包括商品的标题、描述、图片等信息。在电商平台的开发中，详情接口API是非常常用的 API，因此本文将详细介绍详情接口 API 的使用…...
你更喜欢哪一个：VueJS 还是 ReactJS？
观点列表： 1、如果你想在 HTML 中使用 JS，请使用 Vue； 如果你想在 JS 中使用 HTML，请使用 React。 当然，如果您希望在 JS 中使用 HTML，请将 Vue 与 JSX 结合使用。 2、Svelte：我喜欢它&#…...
PyTorch学习笔记（十六）——利用GPU训练
一、方式一 网络模型、损失函数、数据（包括输入、标注） 找到以上三种变量，调用它们的.cuda()，再返回即可 if torch.cuda.is_available():mynn mynn.cuda() if torch.cuda.is_available():loss_function loss_function.cuda(…...
【实战】十一、看板页面及任务组页面开发（三） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十五）
文章目录 一、项目起航：项目初始化与配置二、React 与 Hook 应用：实现项目列表三、TS 应用：JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…...
金额千位符自定义指令
自定义指令文件 moneyFormat.js /*** v-money 金额千分位转换*/export default {inserted: inputFormatter({// 格式化函数formatter(num, util) {if(num null || num || num undefined || typeof(num) undefined){return }if(util 万元 || util 万){return formatMone…...
请不要用 JSON 作为配置文件，使用JSON做配置文件的缺点
我最近关注到有的项目使用JSON作为配置文件。我觉得这不是个好主意。 这不是JSON的设计目的，因此也不是它擅长的。JSON旨在成为一种“轻量级数据交换格式”，并声称它“易于人类读写”和“易于机器解析和生成”。 作为一种数据交换格式，JSON是…...
Hadabot：从网络浏览器操作 ROS2 远程控制器
一、说明 Hadabot Hadabot是一个学习ROS2和机器人技术的机器人套件。使用 Hadabot，您将能够以最小的挫败感和恐吓来构建和编程物理 ROS2 机器人。Hadabot套件目前正在开发中。它将仅针对ROS2功能，并强调基于Web的用户界面。 随着开发的进展&a…...
Kotlin 协程
Kotlin 协程（Coroutines）是一种轻量级的并发编程解决方案，旨在简化异步操作和多线程编程。它提供了一种顺序和非阻塞的方式来处理并发任务，使得代码可以更加简洁和易于理解。Kotlin 协程通过提供一套高级 API，使并发代…...
maven 从官网下载指定版本
1. 进入官网下载页面 Maven – Download Apache Maven 点击下图所示链接 2. 进入文件页，选择需要的版本 3. 选binaries 4. 选文件，下载即可...
数据结构---串（赋值，求子串，比较，定位）
目录 一.初始化 顺序表中串的存储 串的链式存储 二.赋值操作：将str赋值给S 链式表 顺序表 三.复制操作：将chars复制到str中 链式表 顺序表 四.判空操作 链式表 顺序表 五.清空操作 六.串联结 链式表 顺序表 七.求子串 链式表 顺序表…...
WPF CommunityToolkit.Mvvm
文章目录 前言ToolkitNuget安装简单使用SetProperty，通知更新RealyCommandCanExecute 新功能，代码生成器ObservablePropertyNotifyCanExecuteChangedForRelayCommand其他功能对应关系 NotifyPropertyChangedFor 前言 CommunityToolkit.Mvvm（…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
适应性Java用于现代 API：REST、GraphQL 和事件驱动
在快速发展的软件开发领域，REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名，不断适应这些现代范式的需求。随着不断发展的生态系统，Java 在现代 API 方…...