Vue.js绑定

最新推荐文章于 2021-12-25 23:21:33 发布

CZ__

最新推荐文章于 2021-12-25 23:21:33 发布

阅读量147

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ththcc/article/details/78764768

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/lib/vue.min.js"></script><!--引入vue.min.js-->
</head>
<body>
<div id="myapp">
    <p>{{msg}}</p> <!--单向绑定-->
    <p>{{fullInfo}}</p>
    <p>{{info}}</p><!--单向绑定-->
    <input type="text" v-model="welcome"><!-双向绑定-->
</div>
    <script>
        var vm = new Vue({
            el:"#myapp",
            data:{
                msg:"hello world",
                info:"caifuluntan",
                welcome:"welcom"
            },
            watch:{ <!--观察welcome变量,看welcome有没有改变-->
                welcome:function(newval){
                    console.log("watch "+newval);
                }
            },
            computed:{<!--设置fullInfo这个变量和其他双向变量的依赖关系，重新计算最新的值-->
                fullInfo:function(){
                    return this.welcome + "hi";
                }
            }
        })
    </script>
</body>
</html>