Beyond_630
Beyond_630

vue入门篇（七）：Class和Style绑定

前言

这篇文章和大家一起来学习一下Vue中的Class和Style绑定，它们都与样式有关，所以它们在开发中十分常见，我们需要熟悉它们的用法。

Class绑定

不管时Class绑定还是Style绑定都有两种用法，一个是对象的形式，一个是数组的形式。我们先来看看Class绑定是如何使用的吧。下面是一个例子：


<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>Documenttitle>
    <style>
      .activated {
        color: red;
        background-color: blue;
        border: 0;
      }
    style>
  head>

  <body>
    <div id="app">
      
      <button @click="toggleStyle" :class="classObj">
        Hello World
      button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          isActivated: false
        },
        computed: {
          classObj() {
              return {
                activated: this.isActivated
              }
          }
        },
        methods: {
          toggleStyle() {
            this.isActivated = !this.isActivated;
          }
        }
      });
    script>
  body>
html>

上面的代码中，我们给button绑定一个对象，为了让代码更加清晰，我们把这个对象放到计算属性中，该对象中的属性就是button所绑定的class类，它与数据isActivated是有关的，当我们点击按钮使isActivated的值发生变化从而让样式也可以动态变化。

同样，我们也可以绑定一个数组，数组里面可以写多个变量。


<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>Documenttitle>
    <style>
      .activated {
        color: red;
      }

      .activated-one {
        font-size: 40px;
      }
    style>
  head>

  <body>
    <div id="app">
      
      <button @click="toggleStyle" :class="[activated, activatedOne]">
        Hello World
      button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          activated: "",
          activatedOne: ""
        },
        methods: {
          toggleStyle() {
            this.activated = this.activated === "activated" ? "" : "activated";
            this.activatedOne =
              this.activatedOne === "activated-one" ? "" : "activated-one";
          }
        }
      });
    script>
  body>
html>

当然，我们还可以在数组里面传入一个对象，用法和前面是一样的。

这里还要补充一点，当用在Vue组件中时，如果子组件有普通的class类，而父组件绑定了新的class是不会覆盖掉子组件的样式的，反而会组合在一起。

Style绑定

Style绑定和CSS内联样式很相像，它也可以和计算属性来搭配使用。


<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>Documenttitle>
  head>
  <body>
    <div id="app">
      <button @click="toggleStyle" :style="styleObj">
        Hello World
      button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          styleObj: {
            color: "",
            fontSize: ""
          }
        },
        methods: {
          toggleStyle() {
            this.styleObj.color = this.styleObj.color === "red" ? "" : "red";
            this.styleObj.fontSize =
              this.styleObj.fontSize === "40px" ? "" : "40px";
          }
        }
      });
    script>
  body>
html>

数组的用法和前面一致就不多说了。

大家注意，它的属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。而且它还有一个很好的特性：

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

也就是说，我们不用自己去写一大堆浏览器前缀了。

总结

好了，今天我们学习了Class和Style绑定的用法，这讲成为我们Vue开发中最常用的特性之一了。

参考

【1】Class和Style绑定

你可能感兴趣的:(Vue.js,vue)

  • 【no vue no bug】 npm : 无法加载文件 D:\software\nodeJS\node22\npm.ps1 源码方舟 BUGvue.jsbugnpm
    【Bug问题】在vscode中打开项目目录运行npm相关的命令时报下面错误，但是ctrl+r打开控制台输入npm命令又是可以运行的。npm:无法加载文件D:\software\nodeJS\node22\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Pol
  • uniApp出现【ReferenceError: computed is not defined】
    1·问题uniApp出现【ReferenceError:computedisnotdefined】2·解##标题决在当前页导入：import{computed}from'vue'
  • vue项目使用tsx
    1、vue2.7中使用webpack处理，配置如下{test:/\.(ts|tsx)$/,use:[{loader:'babel-loader',options:{presets:['@babel/preset-env','@vue/babel-preset-jsx']}},{loader:'ts-loader',options:{appendTsSuffixTo:[/\.vue$/]//vue文
  • python pywebview + vue3 做桌面端 妃衣 python开发语言
    pythonpywebview+vue3做桌面端Api.py#传给前端的api对象,定义了一个可以通过js调用退出当前应用的函数classApi:def__init__(self)->None:self._window=None#java运行的线程self.process=Nonedefset_process(self,_process):self.process=_processdefset_w
  • [架构之美]手动搭建Vue3 前端项目框架 曼岛_ 成长之路前端
    [架构之美]手动搭建Vue3前端项目框架我们将手动创建一个完整的Vue前端项目，包含基础结构、路由、状态管理和UI组件。下面是实现方案：一.项目结构设计1.1项目架构设计my-vue-project/├──public/│├──index.html│└──favicon.ico├──src/│├──assets/││└──logo.png││├──main.css│├──components/││
  • 【计算机毕业设计】基于SSM+Vue的游戏攻略网站系统【源码+lw+部署文档+讲解】
    目录1绪论1.1研究背景1.2目的和意义1.3论文结构安排2相关技术2.1SSM框架介绍2.2B/S结构介绍2.3Mysql数据库介绍3系统分析3.1系统可行性分析3.1.1技术可行性分析3.1.2经济可行性分析3.1.3运行可行性分析3.2系统性能分析3.2.1易用性指标3.2.2可扩展性指标3.2.3健壮性指标3.2.4安全性指标3.3系统流程分析3.3.1操作流程分析3.3.2登录流程分析3
  • Vue3 - 实现一个雨水滴落的动画效果 程序员的成长之路 Vue3html5javascriptvue
    在Vue3中实现一个雨水滴落的动画效果，可以使用HTML5的元素和JavaScript来绘制和控制动画。以下是一个实现雨水滴落效果的示例：创建一个Vue3项目首先，确保你已经创建了一个Vue3项目。如果还没有，可以使用VueCLI来创建：vuecreaterain-animationcdrain-animation添加Canvas组件创建一个新的Vue组件来包含我们的元素和动画逻辑。创建一个名为R
  • Vue常用插件汇总(2) 2401_84094908 程序员vue.js前端javascript
    文件上传vue-upload-component-Vuejs文件上传组件vue-core-image-upload-轻量级的vue上传插件vue-dropzone-用于文件上传的Vue组件图片处理vue-lazyload-img-移动优化的vue图片懒加载插件vue-image-crop-upload-vue图片剪裁上传组件vue-svgicon-创建svg图标组件的工具vue-img-loade
  • 一次 “简单需求“ 引发的 Vue 缓存血案：从 keep-alive 踩坑到 Vue3 优化全记录
    文章目录前言：一次“简单需求”引发的技术深挖一、问题爆发：缓存有也不是事，没也不是事二、原理拆解：keep-alive到底是怎么“记住你”的？1.它缓存的不是页面，是“组件实例”2.那它怎么判断“谁”该被缓存？3.那你说路由的`meta.keepAlive`起什么作用？4.动态include：缓存的核心控制力5.如果你没写include，会发生什么？小结：缓存是否生效，取决于这三要素推荐key的正
  • v-text 和 v-html 都是用于数据绑定的指令，但它们在处理内容和安全性上有显著区别。
    在Vue.js中，v-text和v-html都是用于数据绑定的指令，但它们在处理内容和安全性上有显著区别。以下是详细说明和注意事项：1.v-text指令作用：将数据以纯文本形式插入到元素中（相当于设置元素的textContent属性）。语法：等价于：{{message}}特点：自动转义HTML标签（例如会变成文本<script>）防止XSS攻击（跨站脚本攻击）覆盖元素内原有的所有内容示
  • java毕业设计-基于Javaweb的家常小菜烹饪学习管理系统的设计与实现(源码+LW+部署文档+全bao+远程调试+代码讲解等) 程序猿刘 vuespringboot毕业设计java课程设计学习
    博主介绍：✌️码农一枚，专注于大学生项目实战开发、讲解和毕业文撰写修改等。全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌️技术范围：：小程序、SpringBoot、SSM、JSP、Vue、PHP、Java、python、爬虫、数据可视化、大数据、物联网、机器学习等设计与开发。主要内容：免费开题报告、任务书、全bao定制+
  • java毕业设计源码案例-基于ssm+协同过滤的个性化小说推荐系统设计与实现(源码+LW+部署文档+全bao+远程调试+代码讲解等) 项目帮 springbootjava计算机毕设java课程设计开发语言
    博主介绍：✌️码农一枚，专注于大学生项目实战开发、讲解和毕业文撰写修改等。全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌️技术范围：：小程序、SpringBoot、SSM、JSP、Vue、PHP、Java、python、爬虫、数据可视化、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计，开题报告、任务书、全b
  • springboot+vue生态系统的气象数据可视化平台Java+python-计算机毕业设计
    目录功能和技术介绍具体实现截图开发核心技术：开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问，采用springboot集成快速开发框架，前端使用vue方式，基于es5的语法，开发工具IntelliJIDEAx64，因为该开发工具，内嵌了Tomcat服务运行机制，可不用单独下载Tomcatserver服务器。由于考虑到
  • 计算机专业大数据毕业设计-基于 Spark 的音乐数据分析项目(源码+LW+部署文档+全bao+远程调试+代码讲解等) 程序猿八哥 数据可视化计算机毕设spark大数据课程设计spark
    博主介绍：✌️码农一枚，专注于大学生项目实战开发、讲解和毕业文撰写修改等。全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌️技术范围：：小程序、SpringBoot、SSM、JSP、Vue、PHP、Java、python、爬虫、数据可视化、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计，开题报告、任务书、全b
  • Python-Django毕业设计养老院老人日常生活管理系统（程序+Lw) Python计算机毕设程序源码_ pythondjango课程设计
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置：Pychram社区版+python3.7.7+Mysql5.7+HBuilderX+listpip+Navicat11+Django+nodejs。项目技术：django+python+Vue等等组成，B/S模式+pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版
  • 基于SpringBoot+Vue的在线学习系统的设计与实现
    一、项目背景与选题动因随着在线教育的快速发展，传统的教学模式已逐渐无法满足现代学习者“随时随地”获取知识的需求。在线学习平台凭借其强大的可扩展性和资源整合能力，在教育信息化浪潮中日益重要。本项目旨在基于SpringBoot+Vue实现一个结构清晰、功能完善的在线学习系统，满足不同用户角色（学生、教师、管理员）在教学、学习、管理等方面的实际需求。适合学习SpringBoot、Vue前后端分离、权限管
  • 计算机毕设——高校在线学习平台
    随着教育信息化改革不断推进，传统教学模式逐渐暴露出诸多弊端，例如资源分散、互动匮乏、教学反馈滞后等。如何借助现代Web技术构建一个功能完善、稳定高效的教学平台，成为许多高校面临的重要课题。本文将从我的毕业设计项目《在线学习平台》出发，分享一个完整在线教育平台的设计与开发过程，涵盖技术选型、系统架构、核心模块实现以及系统测试等内容，适合对SpringBoot+Vue全栈开发感兴趣的同学学习参考。一、
  • Vue.config全局配置 辉夜真是太可爱啦
    1.取消Vue所有的日志与警告。Vue.config.silent=true;2.Vue自定义键名Vue.config.keyCodes={v:86,f1:112,//camelCase不可用mediaPlayPause:179,//取而代之的是kebab-case且用双引号括起来"media-play-pause":179,up:[38,87]}3.设置为false以阻止vue在启动时生成生产提
  • DHTMLX Suite 9.2 重磅发布：支持历史记录、类Excel交互、剪贴板、拖放增强等多项升级
    全球知名的JavaScriptUI组件库DHTMLXSuite迎来9.2新版本！此次更新虽为次版本号，却实质性提升了Grid网格组件的交互能力与用户体验，引入了包括历史记录管理、剪贴板操作、数据选择范围管理、Block区块选择等多项高级模块，支持更接近电子表格的使用体验。新版Grid组件不仅在数据可视化、数据编辑方面功能更强，还增强了与主流前端框架（如React、Vue、Angular）的集成示例
  • 如何用纯 HTML 文件实现 Vue.js 应用，并通过 CDN 引入 Element UI 人工智能训练师 VUEhtmlvue.jsui
    相关名词解释Vue.jsVue.js：是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，提供声明式的、组件化的编程模型，可高效开发用户界面。具有响应式数据绑定等特性，能自动跟踪数据变化并更新DOM。ElementUI：是一个基于Vue.js的流行前端UI框架，由饿了么团队开发和维护。它提供了一系列预设计的Vue组件，如按钮、输入框、表格等，可帮
  • DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_宠物护理示例（CalendarView01_26） 宝码香车 #DeepSeek前端vue.jsecmascriptjavascriptdeepseek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的日历(Calendar)，日历_宠物护理示例（CalendarView01_26）前言本文简介：本文页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由\src\router\index
  • DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_植物浇水示例（CalendarView01_25） 宝码香车 #DeepSeek前端vueecmascriptjavascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的日历(Calendar)，日历_植物浇水示例（CalendarView01_25）前言本文简介：本文页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由\src\router\index
  • DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_学习计划日历示例（CalendarView01_20） 宝码香车 前端vueecmascriptjavascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的日历(Calendar)，日历_学习计划日历示例（CalendarView01_20）前言本文简介：本文页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由\src\router\ind
  • DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_睡眠记录日历示例（CalendarView01_30） 宝码香车 #DeepSeek前端vue.jsecmascriptjavascriptdeepseek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的日历(Calendar)，日历_睡眠记录日历示例（CalendarView01_30）前言本文简介：本文页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由\src\router\ind
  • 二、ubuntu+django+nginx+uwsgi+vue:部署django+vue前后端分离项目
    一、创建用户和文件夹#创建www文件夹，所有网站项目都放到这里$sudomkdir/www#创建用户组sudogroupaddwww-g666#创建用户$sudouseraddwww-u666-g666-M-s/sbin/nologin#查看$idwwwid#设置www文件夹的所属组和所属用户$sudochown-Rwww.www/www/#$sudochmod-R666某一目录,所有用户对一个目
  • 养老院管理系统基于SpringBoot的养老院管理系统系统设计与实现（源码+论文+部署讲解等）
    博主介绍：✌全网粉丝60W+,csdn特邀作者、Java领域优质创作者、csdn/掘金/哔哩哔哩/知乎/道客/小红书等平台优质作者，计算机毕设实战导师，目前专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌技术栈范围：SpringBoot、Vue、SSM、Jsp、HLMT、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习、单片机
  • (5)从零开发 Chrome 插件：Vue3 Chrome 插件待办事项应用 超龄超能程序猿 Chrome插件html5jsonjavascriptvue.js前端框架
    (1)从零开发Chrome插件：构建你的第一个插件(3)从零开发Chrome插件：实现API登录与本地存储功能(3)从零开发Chrome插件：网页图片的批量下载(4)从零开发Chrome插件：Chrome插件调试全攻略(5)从零开发Chrome插件：Vue3Chrome插件待办事项应用Vue3Chrome插件待办事项应用功能概述一个基于Vue3的Chrome插件待办事项应用，具有以下功能：添加/删
  • 前端实现抛物线小球动画效果：从原理到代码实践 编程随想▿ 前端抛物线JSvuereact.js
    目录引言一、抛物线动画的核心原理二、纯HTML/CSS实现抛物线动画1.HTML结构2.CSS动画3.效果说明三、动态交互：JavaScript实现抛物线动画1.HTML结构2.JavaScript逻辑3.效果说明四、Vue.js实现抛物线动画1.组件结构2.实现思路五、React实现抛物线动画1.组件代码2.实现思路六、注意事项七、总结引言在前端开发中，动画效果是提升用户体验的重要手段之一。抛物
  • Vue 3 的 setup 函数里，为什么非要写 return？揭秘背后的核心机制 编程随想▿ Vue3vue.js前端javascript前端框架开发语言
    引言：初学Vue3的CompositionAPI，很多同学都会被setup()函数吸引。它让我们能更灵活地组织组件逻辑，但一个看似简单的return语句却常常让人困惑：“我在setup里定义的变量和方法，为什么一定要return出去？不return行不行？”今天，我们就来深入探讨一下setup中return的核心作用，理解它为什么是Vue3响应式编程的基石。目录一、setup函数的核心职责二、关键
  • Vue3递归组件详解：构建动态树形结构的终极方案 编程随想▿ Vue3vue.js前端javascript前端框架
    目录一、什么是递归组件？二、Vue3递归组件实现步骤1.基础实现2.关键点解析三、动态数据实战：渲染树形菜单四、Vue3递归组件的核心注意事项五、高级技巧：异步递归组件六、常见问题排查结语一、什么是递归组件？递归组件是指在组件内部调用自身的特殊组件。它适用于处理嵌套树形数据结构的场景，例如：文件目录系统多级导航菜单组织架构图嵌套评论列表在Vue3中，递归组件通过name属性标识自身，实现模板自引用
  • java线程的无限循环和退出 3213213333332132 java
    最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。 突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。 希望帮助刚学java线程的童鞋 package thread; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date
  • tomcat 容器 BlueSkator tomcatWebservlet
    Tomcat的组成部分 1、server A Server element represents the entire Catalina servlet container. (Singleton) 2、service service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。   3、connector 一个connector
  • php递归,静态变量,匿名函数使用 dcj3sjt126com PHP递归函数匿名函数静态变量引用传参
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body>
  • 属性颜色字体变化 周华华 JavaScript
    function changSize(className){ var diva=byId("fot") diva.className=className; } </script> <style type="text/css"> .max{ background: #900; color:#039;
  • 将properties内容放置到map中 g21121 properties
    代码比较简单： private static Map<Object, Object> map; private static Properties p; static { //读取properties文件 InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
  • [简单]拼接字符串 53873039oycg 字符串
             工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下：           import java.util.HashMap; import java.uti
  • Struts2学习 云端月影
    最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。 配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。 使用Convention插件，你需要将其JAR文件放
  • Java新手入门的30个基本概念二 aijuans java新手java 入门
    基本概念:　　1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。　　2.OOP中最重要的思想是类,类是模板是蓝图,
  • jedis 简单使用 antlove javarediscachecommandjedis
    jedis.RedisOperationCollection.java package jedis; import org.apache.log4j.Logger; import redis.clients.jedis.Jedis; import java.util.List; import java.util.Map; import java.util.Set; pub
  • PL/SQL的函数和包体的基础 百合不是茶 PL/SQL编程函数包体显示包的具体数据包
    由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,,   函数; 函数:PL/SQL中的函数相当于java中的方法;函数有返回值 定义函数的 --输入姓名找到该姓名的年薪 create or re
  • Mockito(二)--实例篇 bijian1013 持续集成mockito单元测试
            学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。         比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
  • 精通Oracle10编程SQL(7)编写控制结构 bijian1013 oracle数据库plsql
    /* *编写控制结构 */ --条件分支语句 --简单条件判断 DECLARE v_sal NUMBER(6,2); BEGIN select sal into v_sal from emp where lower(ename)=lower('&name'); if v_sal<2000 then update emp set
  • 【Log4j二】Log4j属性文件配置详解 bit1129 log4j
    如下是一个log4j.properties的配置   log4j.rootCategory=INFO, stdout , R log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appe
  • java集合排序笔记 白糖_ java
    public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{ private static final long serialVersionUID = -2958090810811192128L; private int id; private String nam
  • java导致linux负载过高的定位方法 ronin47
    定位java进程ID 可以使用top或ps -ef |grep java ![图片描述][1] 根据进程ID找到最消耗资源的java pid 比如第一步找到的进程ID为5431 执行 top -p 5431 -H ![图片描述][2] 打印java栈信息 $ jstack -l 5431 > 5431.log 在栈信息中定位具体问题 将消耗资源的Java PID转
  • 给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数 bylijinnan 函数
    import java.util.ArrayList; import java.util.List; import java.util.Random; public class RandNFromRand5 { /** 题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。 解法1： f(k) = (x0-1)*5^0+(x1-
  • PL/SQL Developer保存布局 Kai_Ge
          近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段：   &n
  • [未来战士计划]超能查派[剧透,慎入] comsci 计划
           非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........        虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活....    &nbs
  • Google Map API V2 dai_lm google map
    以后如果要开发包含google map的程序就更麻烦咯 http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html 找到篇不错的文章，大家可以参考一下 http://blog.sina.com.cn/s/blog_c2839d410101jahv.html 1. 创建Android工程 由于v2的key需要G
  • java数据计算层的几种解决方法2 datamachine javasql集算器
    2、SQL     SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。     成熟度：5星。最成熟的。   
  • Linux下Telnet的安装与运行 dcj3sjt126com linuxtelnet
    Linux下Telnet的安装与运行   linux默认是使用SSH服务的 而不安装telnet服务  如果要使用telnet 就必须先安装相应的软件包  即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置 如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm
  • PHP中钩子函数的实现与认识 dcj3sjt126com PHP
    假如有这么一段程序： function fun(){ fun1(); fun2(); }   首先程序执行完fun1()之后执行fun2()然后fun()结束。   但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。   我们可以在fu
  • EOS中的WorkSpace密码修改 蕃薯耀 修改WorkSpace密码
    EOS中BPS的WorkSpace密码修改 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
  • SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】 hanqunfeng SpringSecurity
     SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下：   applicationContex
  • ie 9 kendo ui中ajax跨域的问题 jackyrong AJAX跨域
    这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序， 浏览起来是没问题的，但把应用放到公网上的一台服务器， 却发现如下情况： 1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
  • 不要让别人笑你不能成为程序员 lampcy 编程程序员
    在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。 说实话，我感觉我的脑细胞像被轰炸过一样。 手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？ 难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？ 我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
  • 马皇后的贤德 nannan408
       马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。 　　有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
  • 选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以） Rainbow702 sqlgroup by最大值max最大的那条记录
    好久好久不写SQL了，技能退化严重啊！！！   直入主题： 比如我有一张表，file_info， 它有两个属性（但实际不只，我这里只是作说明用）： file_code, file_version 同一个code可能对应多个version 现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录， SQL如下： select *
  • VBScript脚本语言 tntxia VBScript
      VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。   VB家族语言简介   Visual Basic 6.0           源于BASIC语言。           由微软公司开发的包含协助开发环境的事
  • java中枚举类型的使用 xiao1zhao2 javaenum枚举1.5新特性
    枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量.   1.定义一个简单的枚举类型 public enum Sex { MAN, WOMAN }   枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型.   2.常用方法 静态的values()方
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他