样式绑定语法
直接赋值类名
样式部分:
.green {
color: green;
}
.yellow {
color: yellow;
}
代码部分：
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天'
}
},
template: `
<div class="green">{{tip}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
我们可以直接像上面那样,直接将样式在代码中通过class赋值。
如果我们想实现颜色可以通过数据进行控制,我们可以怎么实现?
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green'
}
},
template: `
<div :class="colorType">{{tip}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
我们可以直接像上面这样,在data中定义一个变量去控制,然后在标签中通过:class="colorType"进行绑定
以上两种的显示结果是一样的如下:
如果我们想改变颜色我们可以在控制台中通过vm.$data.colorType = 'yellow',发现颜色变成我们修改的颜色了
此外字符串修改外,Vue还提供了数组和对象等形式进行修改,下面分别给对象和数组做一些说明
通过对象修改
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green',
colorObj: { green: true, yellow: true }
}
},
template: `
<div :class="colorObj">{{tip}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
控制台显示结果:
通过控制台的div标签我们发现样式中显示了green和yellow的类名,其中data中的colorObj: { green: true, yellow: true }中的第一个green代表的是类名,true代表的显示这个类名,如果想不显示类名将true修改为false
通过数组修改
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green',
colorObj: { green: true, yellow: true },
colorArray: [ 'green' ]
}
},
template: `
<div :class="colorArray">{{tip}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
当我们在colorArray中添加green在控制台中去看div的标签,就会显示对应的类名
数组中我们还可以添加对象
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green',
colorObj: { green: true, yellow: true },
colorArray: [ 'green', { blue: true } ]
}
},
template: `
<div :class="colorArray">{{tip}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
控制台显示结果：
数组中的对象参数和对象中的参数意思是一样的,{ blue: true }其中blue表示类名,true表示显示类名,如果是false就不会显示blue这个类名。
当父组件中嵌套子组件
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green',
colorObj: { green: true, yellow: true },
colorArray: [ 'green', { blue: true } ]
}
},
template: `
<div :class="colorType">{{tip}}
<children />
</div>
`
})
app.component('children', {
template: '<div>子组件</div>'
})
const vm = app.mount('#root')
</script>
</body>
如果我们想要把子组件中的颜色修改为yellow,我们可以直接在子组件中添加一个类名,相关类名样式头部已经给出,我们这样写就行<div class="yellow">子组件</div>,如果子组件只有外部一个标签,就像例子中这样,我们还可以把类名写在子组件上<children class="yellow" />,当把子组件修改为2个标签,例如下面代码:
app.component('children', {
template: `
<div>子组件1</div>
<div>子组件2</div>
`
})
此时发现<children class="yellow" />中的class已经不生效了,因为系统不知道我们想把样式写在哪个子组件中,如果想解决这个问题,我们应该怎么做？
第一种方法
template: `
<div :class="colorType">{{tip}}
<children />
</div>
`
app.component('children', {
template: `
<div class="yellow">子组件1</div>
<div class="yellow">子组件2</div>
`
})
我们不在父组件中写样式,在template的子组件每个标签中添加样式,就能解决这个问题
第二种方法
template: `
<div :class="colorType">{{tip}}
<children class="yellow" />
</div>
`
app.component('children', {
template: `
<div :class="$attrs.class">子组件1</div>
<div>子组件2</div>
`
})
我们在父组件中写样式,在子组件中通过绑定:class = $attrs.class获取父组件中的样式,也可以解决这个问题
额外补充关于行内样式怎么写？
第一种方法
直接在行内样式中书写样式:
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green',
colorObj: { green: true, yellow: true },
colorArray: [ 'green', { blue: true } ]
}
},
template: `
<div style="color: yellow;">
{{tip}}
</div>
`
})
app.component('children', {
template: `
<div :class="$attrs.class">子组件1</div>
<div>子组件2</div>
`
})
const vm = app.mount('#root')
</script>
</body>
第二种方法
我们也可以在data中定义一个类名,然后再标签中绑定类名
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green',
colorObj: { green: true, yellow: true },
colorArray: [ 'green', { blue: true } ],
styleTip: "color: yellow;"
}
},
template: `
<div :style="styleTip">
{{tip}}
</div>
`
})
app.component('children', {
template: `
<div :class="$attrs.class">子组件1</div>
<div>子组件2</div>
`
})
const vm = app.mount('#root')
</script>
</body>
第三种方法
我们可以通过对象的方式
<body>
<div id="root">
</div>
<script>
// data & methods & computed & watcher
const app = Vue.createApp({
data () {
return {
tip: 'Vue学习第三天',
colorType: 'green',
colorObj: { green: true, yellow: true },
colorArray: [ 'green', { blue: true } ],
styleTip: "color: yellow;",
styleTipObj: {
color: 'pink'
}
}
},
template: `
<div :style="styleTipObj">
{{tip}}
</div>
`
})
app.component('children', {
template: `
<div :class="$attrs.class">子组件1</div>
<div>子组件2</div>
`
})
const vm = app.mount('#root')
</script>
</body>
控制台显示结果：
需要我们想要添加别的样式,可以直接在styleTipObj中去写,类似如下：
styleTipObj: {
color: 'pink',
background: 'red'
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！