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"> ...
随机推荐
- FutureTask类
FutureTask类是Future 的一个实现,并实现了Runnable. 所以可通过Executor(线程池)来运行,也可传递给Thread对象运行. 假设在主线程中须要运行比較耗时的操作时.但 ...
- How to trigger a Kubernetes cronjob manually-手动触发一个cronjob
What should you do when you’ve developed and installed a cron job for your Kubernetes application, a ...
- 像Excel一样使用python进行数据分析
Excel是数据分析中最常用的工具,本篇文章通过python与excel的功能对比介绍如何使用python通过函数式编程完成excel中的数据处理及分析工作.在Python中pandas库用于数据处理 ...
- P2P贷款全攻略,贷前、贷中、贷后工作事项解析
一.贷前调查事项 贷前调查是所有银行.小贷.P2P等等往出贷款部门的重中之重. 归根结底就是两条:让不对称信息最大限度对称.让软信息最大限度真实还原. 客户还不还款就是取决两大因素:还款能力.还款意愿 ...
- ios the request was denied by service delegate for reason unspecified
报错的情况如下: xcode8(The request was denied by service delegate (SBMainWorkspace) for reason: Unspecified ...
- 如何在IIS上发布网站 在阿里云服务器windows server2012r iis上部署.net网站
如何在IIS上发布网站 本片博客记录一下怎么用IIS发布一个网站,以我自己电脑上一个已经开发完成的网站为例: 1.打开项目 这是我电脑上的一个项目,现在我记录一下将这个项目发布到iis上的整个过程 ...
- C#中IEnumerable、ICollection、IList、List之间的区别
IEnumerable.ICollection.IList.List之间的区别,本文分别分析了它的实现源码,从而总结出了它们之间的关系和不同之处. 首先我看看 IEnumerable: // 摘要: ...
- POSTMAN发送WebService接口
WebService是一种跨编程语言和跨操作系统平台的远程调用技术 http://www.oorsprong.org/websamples.countryinfo/countryinfoservice ...
- 在 java 开发接口中需要注意的问题
1 在开发过程中免不了对接上游或下游,有合作就要保证入参.出参的准确性.一个接口一般只能处理有限情况下的情况,因此在逻辑处理前要对入参进行校验. 2 在自己的逻辑处理过程中,要时刻持有怀疑的态度.假设 ...
- mysql 动态增加列,查找表中有多少列,具体什么列。 通过JSON生成mysql表 支持子JSON
好消息, 程序员专用早餐机.和掌柜说 ideaam,可以节省20元. 点击链接 或復·制这段描述¥k3MbbVKccMU¥后到淘♂寳♀ 或者 淘宝扫码 支持下同行哈 ---------------- ...