VUE 属性绑定

作者: 小黄不头秃 | 来源:发表于2023-06-03 08:15 被阅读0次

<!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">
        <a v-bind:href="url">baidu</a>
        <a :href="url">baidu</a>
        <button v-on:click="handel">change</button>
    </div>
    <script src="./vue/vue.js"></script>
    <script>
        // 属性绑定
        var vm = new Vue({
            el:"#app",
            data:{
                url:"http://www.baidu.com"
            },
            methods:{
                handel:function(){
                    // 修改url
                    this.url="http://itcast.cn";
                }
            }
        });
        // 双向数据绑定
        // v-model = v-bind+v-on:handel
        // handel(){
            // msg = event.target.value;
        // }
    </script>
</body>
</html>