Vue.js绑定

关注

原创最新推荐文章于 2026-05-20 14:22:30 发布 221 阅读 AI 写同款· GEO 优化 ›

vue项目原生js事件绑定与兼容处理首先创建bindlistener.js文件放在如下图其内容如下： /* * 事件绑定兼容兼容 Mozilla 和 IE 等处理 * 使用示例 type 事件 function 方法 object 事件对象 * EventUtil.addHandler('click', function, object);//绑定方法 * EventUtil.removeHandler('clic... 阅读详情

<!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>