vue class绑定和style绑定
vue class绑定和style绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<style>
.redClass{
color: red;
}
.blueClass{
color: blue;
}
.f{
font-size: 22px;
}
</style>
<body>
<div id="app">
<h1> class绑定</h1>
<!--
:class="xxx"
xxx是字符串
xxx是对象
xxx是数组
-->
<br />
<p class="f" :class="a">xxx是字符串</p>
<p :class="{redClass:true,f:true}">xxx是对象</p>
<p :class="{blueClass:c,f:b}">xxx是对象</p>
<p :class="['redClass','f']">xxx是数组</p>
<button @click="change">变为蓝色</button>
<br />
<h2> style绑定</h2>
<!--驼峰命名-->
<p :style="{color:color,fontSize:fontSize +'px',marginLeft:ml}">测试</p>
</div>
<script>
var v=new Vue({
el:'#app',
data:{
a:'redClass',
c:false,
b:false,
color:'red',
fontSize:30,
ml:"50px"
},
methods:{
change(){
this.a="blueClass"
this.b=true;
this.c=true;
}
}
})
</script>
</body>
</html>
猜你喜欢
ofc
vue表达式-数据绑定-事件绑定
weblog
2009
vue表达式-数据绑定-事件绑定!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="https
weblog
2374
vue使用v-model(双向数据绑定)自动收集表单数据!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js
ofc
vue使用插件和自定义插件
weblog
2498
自定义一个插件.js(function(){ //需要向外暴露的插件对象 constMyPlugin={}; MyPlugin.install=function(Vue,options){ //1
ofc
vue常用内置指令和自定义指令
weblog
2885
vue常用内置指令最后两个指令测试!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js/vue.min.js
ofc
vue搜索过滤和排序
weblog
2858
vue搜索过滤和排序!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js/vue.min.js"/script
blog
vue第一个vue-cli程序
算法基础,linux
1142
《前端开发》安装node.js下载64位安装包,下载地址:http://nodejs.cn/download/傻瓜式安装,一路nextnode-v和npm-v命令检验是否安装成功如果有版本出现就代表
blog
vue过滤器和时间日期转换
前端(h5)
2677
vue过滤器和时间日期转换!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js/vue.min.js
weblog
4083
vue使用v-for遍历数组和遍历对象splic(...)方法的使用请参考:http://www.jiajiajia.club/blog/artical/262!DOCTYPEhtmlhtml
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。