Vue学习--第二天（3.5属性绑定）

最新推荐文章于 2025-04-16 11:06:03 发布

koujiaodahanyuan

最新推荐文章于 2025-04-16 11:06:03 发布

阅读量374

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/koujiaodahanyuan/article/details/107886881

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

模板语法

–3.5属性绑定

1.Vue如何动态处理属性

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

遇到问题：
a标签里的内容在页面显示不是超链接
原因：
vue里面el的值没有用引号包起来

2.v-model的底层原理分析

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

控制台vm.msg可以看到数据的改变
v-model其实是利用了v-bind绑定了value值，利用v-on绑定input改变事件,将新数据覆盖旧数据.

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

demo:

<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" 		xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>属性绑定</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<a v-bind:href="url">百度</a>
<button v-on:click="handle">url切换</button>
<input type="text" v-bind:value="msg" v-on:input="handle2">
<input type="text" v-bind:value="msg" v-	on:input="msg=$event.target.value">
<input type="text" v-model="msg">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el:'#app',
    data:{
        url:'http://www.baidu.com',
        msg:'hello'
    },
    methods:{
        handle:function () {
            //修改URL的地址
            this.url='http://Itcast.com'
        },
        handle2:function (event) {
            //使用输入域中的最新的数据覆盖元数据
            this.msg= event.target.value;
        }
    }
})
</script>
</body>
</html>