Vue属性绑定~非常详细

最新推荐文章于 2024-04-19 18:32:11 发布

weixin_46370867

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量1.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/112974966

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

下面是对Vue属性绑定的整理，希望可以帮助到有需要的小伙伴~

属性绑定

Vue如何动态处理属性

v-bind指令用法
```
<a v-bind : href='url'>跳转</ a>
```
缩写形式
```
<a : href="ur1">跳转</ a>
```

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue动态处理属性</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">百度1</a>
        <!-- 可简写为 -->
        <a :href="url">百度2</a>
        <!-- 以上2个  相当于 -->
        <!-- <a href="http://www.baidu.com">百度</a> -->

        <button v-on:click="handle">切换</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 动态处理属性
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'http://www.baidu.com'
            },
            methods: {
                handle: function(){
                    // 修改url地址
                    this.url = 'https://www.taobao.com/'
                    // 这个修改url地址的函数被绑定到切换按钮中了，当点击切换按钮后，会跳转到新修改后的链接中

                }
            }
        })
    </script>
</body>
</html>

v-model的低层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的绑定</title>
    
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
       <!-- <input type="text" v-bind:value="msg" v-on:input='handle'> -->
       <!-- 相当于 -->
       <!-- <input type="text" v-bind:value="msg" v-on:input='msg = $event.target.value'> -->
       <!-- 相当于 -->
       <input type="text" v-model='msg'>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*
            model指令的本质
        */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                msg: 'Hello'
            },
            methods: {
                handle: function(event) {
                    // 使用输入与中的最新数据覆盖原来的数据
                    this.msg = event.target.value;
                }
            }
        })
    </script>
</body>
</html>

end~
加油！！！

weixin_46370867

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue属性绑定~非常详细

下面是对Vue属性绑定的整理，希望可以帮助到有需要的小伙伴~属性绑定Vue如何动态处理属性v-bind指令用法<a v-bind : href='url'>跳转</ a>缩写形式<a : href="ur1">跳转</ a>示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫