前端应用_Vue_Vue常见的指令v-bind使用场景

问题是：

如下的代码片 title和value ， 我想用 vue对象 data 里的值，如何实现呢？

<input type="button" value="" title="">
<script>
        var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    message: 'Hello,Vue',
                    message2:'<h1>我是一个超大的head，请避让下</h1>'    ,
                    title:'我是一个可以点击的button',
                    value:'SAVE',
                }
            }
        )
    </script>

我们尝试两个方法，第一个 用{{}} 去取，第二个 用 [] 中括号也是一种取变量的方法.

显示的效果如下：

首先 {{}} 这个已经废弃了，你不要再用了，并且给你推荐个方法 v-bind 并且例子给你说了照写就行了
[] 取值根本不可用.

看来这个提示信息，真的很强大，直接告诉我们一个知识点 v-bind.

v-bind 是vue 中， 提供的用于绑定属性的指令

上边的标签就可以改写了

显示效果为：

提出一个需求就是我们想在属性内添加内容

有两个方法

1. 直接在 vue data里修改

 data:{
                    message: 'Hello,Vue',
                    message2:'<h1>我是一个超大的head，请避让下</h1>'    ,
                    title:'我是一个可以点击的button 我想怎么改就怎么改',
                    value:'SAVE',
                }

2. v-bind 功能是能识别属性， 你就把他当做变量修改就行了
   v-bind:title=title+‘123’

用简写代替

以后写用 ‘:’ 代替 ‘’v-bind：‘

改写为

<input type=“button” :value=value :title=title+‘123’>’