这样为嗄不行,v-bind在这种情况下如何使用

来源:3-8 编程练习

福徐贵

2020-09-22 21:35:55

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>


<body>

    <div id="app">

        <!-- 在此补充代码 -->

        <p v-html="title"></p>

        <li v-for="item in list" :class='color'>{{item}}</li>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            data:{

                color:'red'

            },

            data() {

                return {

                    title: "<h1>小慕喜欢的水果</h1>",

                    list: ["芒果", "草莓", "荔枝", "山竹"]

                }

            },


        })

    </script>

    <style>

        .red{

            font-weight: bold;

        }

    </style>

</body>


</html>


写回答

1回答

好帮手慕糖

2020-09-23

同学你好,这里不是v-bind没有生效哦,是定义的color的问题。应该放在下面data()中,如下:

http://img.mukewang.com/climg/5f6aab4009ef495a06490402.jpg

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

0

0 学习 · 10739 问题

查看课程