问题是:
如下的代码片 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 中, 提供的用于绑定属性的指令
上边的标签就可以改写了
显示效果为:
提出一个需求就是我们想在属性内添加内容
有两个方法
- 直接在 vue data里修改
data:{
message: 'Hello,Vue',
message2:'<h1>我是一个超大的head,请避让下</h1>' ,
title:'我是一个可以点击的button 我想怎么改就怎么改',
value:'SAVE',
}
- v-bind 功能是能识别属性, 你就把他当做变量修改就行了
v-bind:title=title+‘123’
用简写代替
以后写用 ‘:’ 代替 ‘’v-bind:‘
改写为
<input type=“button” :value=value :title=title+‘123’>’