v-bind属于单项绑定，常用语属性等不支持修改的数据绑定

zkelm.com

于 2020-04-24 14:09:29 发布

阅读量631

点赞数

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

本文链接：https://blog.csdn.net/zkelm/article/details/105729844

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue之绑定数据 v-bind v-on v-model 区别
简单说：v-bind 是单项绑定，而 v-model 是双向绑定看实例

v-bind:单项绑定

<html>
<div id="app">
<input type="text" v-bind:value="Myvalue">
<p>Input绑定的值Value={{Myvalue}}</p>
<button v-on:click="SETvalue" >点击修改Myvalue值</button>
</div>
<script>
 new Vue({
      el:"#app",
      data:{
         Myvalue:"0000"
      },
      methods:{
         SETvalue:function(){
                 this.Myvalue=prompt("请输入你要的值")
            }
         }
})
</script>
</html>

运行结果：
在这里插入图片描述

总结：v-bind 是一个单向绑定的函数，只是给HTML的元素属性进行一种赋值 (不可变的属性)

<a v-bind:href="url">点击跳转</a>
<script>
new Vue({
   el:"#app",
   data:{
       url:"http://www.qq.com"
     },
     methods:{
       seturl:function(e){
             this.url=e
          }
       }
})
</script>