vue添加class样式实例讲解
vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换。案例中将通过使用:class设置 字体为红色。
1、新建一个html代码页面。
2、在html代码页面创建一个<div>同时添加id为app,并添加一段文本
3、引入vue.js文件。使用<scrtip>标签引入vue文件。
4、创建vue实例。新建一个<script>标签,然后使用new Vue()创建实例。
代码:
<script> var app = new Vue({ el:"#app" }) </script>
5、创建设置字体为红色的red样式。在<title>标签后面创建一个<style>标签,然后设置字体为红色的red样式。
代码:
<style> .red{ color: red; } </style>
6、使用:class添加red类样式。在<div>标签里面添加 :class="{red:true}"。
7、保存html代码后使用浏览器打开,即可看到字体已经变为了红色
相关推荐
-
vue--点击当前增加class,其他删除class的方法
如下所示: <div id="app"> <p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p> </div> <script> new Vue({ el: '#app', data: { datas: { da
-
vue中v-for通过动态绑定class实现触发效果
vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo
-
在vue中动态添加class类进行显示隐藏实例
如下所示: <div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger">视频</el-button> </div> <!-- 查岗部分显示影藏 --> <div class
-
vue实现动态显示与隐藏底部导航的方法分析
本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 方式一: 1. 路由配置meta: {footShow: true, }, routes: [ { path: '/', name: 'home', redirect: '/home', // 默认路由添加class component: home, meta: { footS
-
vue中动态添加class类名的方法
vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'
-
vue添加class样式实例讲解
vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换.案例中将通过使用:class设置 字体为红色. 1.新建一个html代码页面. 2.在html代码页面创建一个<div>同时添加id为app,并添加一段文本 3.引入vue.js文件.使用<scrtip>标签引入vue文件. 4.创建vue实例.新建一个<script>标签,然后使用new Vue()创建实例. 代码: <script&g
-
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
-
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
-
vue 添加vux的代码讲解
简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状
-
vue组件watch属性实例讲解
本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <body> <div i
-
vue-ls vue本地储存的实例讲解
目录 安装 Npm Yarn 使用 Global(全局) Context(上下文) API 说明 vue-ls介绍 Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage 一个vue封装的本地储存的方法. 安装 Npm npm install vue-ls --save Yarn yarn add vue-ls 使用 Vue-ls Storage API import Storage from 'vue-ls'; options = { names
-
vue实现商品列表的添加删除实例讲解
我们首先来看下代码: <div id="app"> <div class="container"><form class="form-inline"> <div class="form-group"><label for="exampleInputName2">ID:</label> <input id="example
-
vue组件初学_弹射小球(实例讲解)
1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: "0px", //小球距离左边坐标 speedX: 12, //小球每次水平移动距离 speedY: 6 //小球每次垂直移动距离 } 3. 思路 3.1 定时器设置小球每一帧移动 3.2 初始方向:isXtrue为true则小球为横坐标正方向: isYtrue为true则小球为纵坐标正方向 3
-
vue 多入口文件搭建 vue多页面搭建的实例讲解
红色为更改后的不同之处 vue 多入口文件搭建 在webpack.base.conf 中修改 var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname,'../') var glob = require('glob'); var entries = getEntry('./src/modul
-
vuejs 动态添加input框的实例讲解
实例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="front" val
随机推荐
- json的前台操作和后台操作实现代码
- 用vbs实现选择颜色
- 简单好用的ASP.NET分页类(支持AJAX、自定义文字)
- PHP使用DES进行加密与解密的方法详解
- 谈PHP生成静态页面分析 模板+缓存+写文件
- JavaScript数据结构与算法之集合(Set)
- mysql 复制记录实现代码
- Oracle中sys和system用户、系统权限和角色的区别
- Android使用ViewPager实现自动轮播
- JS实现间歇滚动的运动效果实例
- win2008 r2 web服务器IIS的安装与基本设置
- python中文编码问题小结
- Python中的迭代器与生成器高级用法解析
- PHP框架Laravel学习心得体会
- Android自定义控件实现圆形进度条
- 2500接入服务器配置
- PHP正则表达式处理函数(PCRE 函数)实例小结
- pyqt5 实现 下拉菜单 + 打开文件的示例代码
- 微信小程序通过js实现瀑布流布局详解
- 详解关于Vuex的action传入多个参数的问题