Vue2学习笔记:html属性

1.使用

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    url:'https://www.baidu.com/img/baidu_jgylogo3.gif',

                    w:'200',

                    t:'百度图标'

                },

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <!-- 错误 -->

        <img src="{{url}}">

        <!-- 方式1 -->

        <img v-bind:src="url">

        <!-- 方式2 -->

        <img :src="url" :width="w" :title="t">

    </div>

</body>

</html>

结果：

{{url}}的方式是错的，其他两种都可以。

巴特西

Vue2学习笔记:html属性

最新文章

热门文章