Vue-实操1

最新推荐文章于 2023-06-11 18:19:26 发布

Ellen-琳子

最新推荐文章于 2023-06-11 18:19:26 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/weixin_45905671/article/details/105924842

版权

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        username:<p>{{username}}</p>
        password:<p>{{password}}</p>
        <!-- {{demo()}} -->
        <!-- {{demo(username)}} -->
        <!-- <p @click='demo'></p> -->
        <button @click='demo'>按钮</button>
        <p v-html='code'>{{code}}</p>
        <div v-html='code'></div>
        <!-- 下面一条是错误的，属性不用写在花括号中 -->
        <!-- <img v-bind:src="{{imagesrc}}" alt=""> -->
        <!-- <img v-bind:src="imagesrc" alt=""> -->
        <img :src="imagesrc" alt="">
    </div>
</body>
</html>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script	src="./vue.js"></script> 

<script>
    new Vue({
        el:"#app",
        data: {
            "username": "教育",
            "password": 123,
            "code" :"<a href='https://baidu.com'>百度一下</a>",
            "imagesrc":"https://www.baidu.com/img/dong_f6764cd1911fae7d460b25e31c7e342c.gif"
        },
        methods:{
            // demo: function(name){
            //     // return "晚上好," + this.username
            //     return "晚上好," + name
            // }
            demo: function(){
                // return "晚上好," + this.username
                this.username = "lgcoder"
              
            }
        }
        
        
    })
</script>