$emit() 括号里面的引号不是常用的单引

最新推荐文章于 2021-10-08 16:52:51 发布

原创最新推荐文章于 2021-10-08 16:52:51 发布 · 586 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的动态调整文本字体大小的功能。通过点击按钮可以减小字体大小，展示了Vue.js的数据绑定及事件处理机制。文章提供了一个简单的示例，包括HTML结构、JavaScript逻辑以及CSS样式。

  <div id="app" >
        <div :style="{ fontSize: postFontSize + 'px' }">
            <blog
                    v-for="post in posts"
                    v-bind:key="post.id"
                    v-bind:post="post"
                    v-on:enlarge-text="postFontSize-=10"
            ></blog>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>

        Vue.component('blog',{
            props:['post'],
            template:'<div class="content"><h3><button v-on:click="$emit(`enlarge-text`)"> Enlarge text </button><h1>{{ post.name}}</h1></div>'
        })

        new Vue({
            el:'#app',
            data:{
                posts:[
                    { id:1, title:'jack',name:'sjemguamg'},
                    { id:2, title:'zhangsan',name:'xingcheng'}
                ],
                postFontSize:40
            }
        })

    </script>

括号里面的引号要是用单引号('')会报错，用这个(``)不报错