夜光带你走进Vue.js（十八）擅长的领域

最新推荐文章于 2019-11-07 08:48:28 发布

GeniusTeam-夜光

最新推荐文章于 2019-11-07 08:48:28 发布

阅读量132

点赞数

分类专栏： Genius-Vue.js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102451119

版权

Genius-Vue.js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

初次见面会时，他端着酒杯，伴着殷勤话，笑嘻嘻地向我敬酒时的模样，还历历在目。等到他找到更好的圈子时，那副殷勤的面孔，立刻变得冷漠，这转变之快，我真以为在看川剧变脸。

至此，我就越发觉得此人不可深交，见人下菜碟的场面见多了，也寒了这颗心，对于两面人还是敬而远之吧。

正文：

Vue.js 样式绑定

Vue.js class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。

表达式的结果类型除了字符串之外，还可以是对象或数组。

例子1：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="dynamic">
    <div v-bind:style="{color: 'red', fontSize: fontSize + 'px'}">可以动态调节</div>
    <div v-bind:style="objectStyle"> 不可以动态调节</div>
    {{fontSize}}
    <button @click="++fontSize">+</button>
    <button @click="--fontSize">-</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#dynamic',
        data: {
            fontSize: 20,
            objectStyle: {
                color: 'green',
                fontSize: this.fontSize + 'px'
            }
        }
    })
</script>
</body>
</html>

例子2：

PS：动态调节需要注意在 data 里面调用 data 的数据是 undefined 的，正确的使用方法是使用 computed。

（使用 methods 返回无效，或许是因为不支持这样的设置）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <div v-bind:style="{color: 'red', fontSize: size + 'px'}">可以动态调节</div>
    <div v-bind:style="computedStyle">可以动态调节</div>
    <div v-bind:style="objectStyle"> 不可以动态调节</div>
    <div v-bind:style="methodStyle"> 不可以动态调节</div>

    {{size}}
    <button @click="++size">+</button>
    <button @click="--size">-</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            size: 20,
            objectStyle: {
                color: 'green',
                fontSize: this.size + 'px' //夜光：this.size为undefined
            }
        },
        methods:{
            methodStyle: function(){
                return {color: 'green', fontSize: this.size + 'px'} //夜光：失效,颜色也不会改变
            }
        },
        computed: {
            computedStyle: function () {
                return {color: 'red', fontSize: this.size + 'px'}
            }
        }
        })
</script>
</body>
</html>

例子3：

嗯唔~~加一个 watch 方法，objectStyle 的方式也能实现动态变化。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <div v-bind:style="{color: 'red', fontSize: size + 'px'}">可以动态调节</div>
    <div v-bind:style="computedStyle">可以动态调节</div>
    <div v-bind:style="objectStyle"> 可以动态调节</div>
    <div v-bind:style="methodStyle()"> 可以动态调节</div>
    {{size}}
    <button @click="++size">+</button>
    <button @click="--size">-</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            size: 20,
            objectStyle: {
                color: 'green',
                fontSize: 20 + 'px' //this.size为undefined
            }
        },
        methods:{
            methodStyle: function(){
                return {color: 'green', fontSize: this.size + 'px'} //失效,颜色也不会改变
            }
        },
        computed: {
            computedStyle: function(){
                return {color: 'red' , fontSize: this.size + 'px'}
            }
        },
        watch: {   //这里我们添加一个watch方法
            size: function(){
                this.objectStyle.fontSize = this.size + 'px'
            }
        }
    })
</script>
</body>
</html>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进Vue.js（十八）擅长的领域

夜光序言：初次见面会时，他端着酒杯，伴着殷勤话，笑嘻嘻地向我敬酒时的模样，还历历在目。等到他找到更好的圈子时，那副殷勤的面孔，立刻变得冷漠，这转变之快，我真以为在看川剧变脸。至此，我就越发觉得此人不可深交，见人下菜碟的场面见多了，也寒了这颗心，对于两面人还是敬而远之吧。正文：Vue.js 样式绑定Vue.js classclass 与 style 是 ...
复制链接

扫一扫

专栏目录