vue的属性样式绑定,
<template>
<div id="app">
你好,我是vue<br/>
{{msg}}
<hr>{{obj.name}}</hr>
<h v-bind:title="title">标题</h>
<h :title="title1">副标题</h> <hr>
<ul> 无序
<li v-for="item in items"> //是两级列表
{{item.title}} 第一级内容
<ol> 有序
<li v-for="(per,key) in item.person" :class="{red:key==0,blue:key==1}"> v-for遍历元素,key是每一项索引,这里作用来获取第一项和第二项改变字体颜色
{{per.name}} -----------第二季内容
{{key}} </li> </ol> </li> </ul> </hr> <div class="isdanger" v-bind:class="[{active:isactive},isantive]" v-bind:style="stylesheet">这是绑定class属性</div> </div> </template>
<script> export default
{ name: 'app', data () {
return
{ msg: '', obj:{name:'小班'},
items:[{ "title":"编辑", "person":[ {"name":"小明"},{"name":"小芳"},{"name":"小仅"} ]},
{ title:"开发", "person":[{"name":"大明"},{"name":"芳"},{"name":"仅"}] } ],
title:"这是vue的api", title1:"这是副标题", isactive:true, stylesheet:{ color:"red", fontSize:'40px' },
H:"<h2>我是</h2>" } } } --------------绑定html,让前台解析用v-html </script>
<style>
.red{ color:red } .blue{ color:blue } </style>
vue的属性样式绑定,的更多相关文章
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- Vue.js:样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- vue.js(7)--vue中的样式绑定
vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- vue中的样式绑定
样式绑定 样式绑定有class绑定和style绑定,这里我们分别说说 class绑定 class样式绑定与有两种语法:对象语法(v-bind:class='{active:isActive}').数组 ...
- vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...
- v-bind绑定属性样式——class的三种绑定方式
1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...
- Vue(九):样式绑定v-bind示例
Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 st ...
- Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- iOS10使用SecKeyCreateWithData读取公钥私钥
在使用openssl命令生成RSA公钥私钥以后,当后端人员把密钥的字符串发给你: 首先要问清公钥私钥的密钥格式(PKCS1,PKCS8),密钥位数(1024,2048),然后在iOS10以后,使用苹果 ...
- angualrjs 配置超时时间
timeout 1 本想通过$httpProvider的defaults属性配置timeout时间, defaults中没有这个属性. https://docs.angularjs.org/api/n ...
- tmunx error:invalid option: status-utf8 invalid option: utf8
修改为:set-window-option -gq mouse off set-window-option -gq mode-mouse off set-option -gq status-utf8 ...
- [C#] VS2017中在某些目录下使用不了 .NET Core 2.0 问题的处理办法
作者: zyl910 一.缘由 最近遇到了一个奇怪的问题--明明已经在VS2017里装好了 .NET Core 2.0 SDK,且测试过新建一个 .NET Core 2.0控制台项目能成功使用.但是在 ...
- EF Migrations error: No connection string named 'MpDb' could be found in the application config file.
solution: update-database 命令查找连接字符是在当前启动项目中找的 确保启动项目中connectiongString配置存在.
- Unty中通过镜像优化HDRI全景图体积
全景图即HDRI贴图,可以代替6面cubemap,传统3D软件运用较为广泛.一般反射探针,天空盒等都会用到. 但是体积过大是个问题,特别是移动端会对包体大小进行控制,虽说可以通过球面贴图替换掉部分环境 ...
- Atitit 热烈庆祝读经器项目圆满完成
Atitit 热烈庆祝读经器项目圆满完成 1.1. 读经器项目简单介绍 1 1.2. 一万小时定律和十年一个专家定律 1 1.3. 获得加持前景 1 1.4. 核心源码 1 1.5. 项目git 2 ...
- 【OpenFOAM案例】03 Docker安装OpenFOAM
"工欲善其事必先利其器",软件装不上,讲再多的使用技巧也是白搭.近期不少留言说OpenFOAM不容易安装,今天来谈谈如何在Linux下利用Docker安装OpenFOAM. Lin ...
- 【Java】Java8的Lambda入门记录
简化定义匿名实现类 匿名实现类的传统方式 创建一个线程,需要实现Runnable接口,并实现public void run()方法,用传统的方式是这样的: public static void mai ...
- Linux零基础入门第四课
根据直播讲义整理的内容,从第四课开始.前三课的内容若后面有精力会一并整理进来. 文件的基本操作(上) 创建.删除.复制.移动和重命名 touch命令创建文件 语法 >$ touch file0 ...