VUE绑定总结:
- { {}}去data里面的属性值和函数返回值
- v-bind简写:bind用来绑定style和class
- v-on简写@on用来绑定事件
- v-model用来双向绑定如input selected等标签
1-{ { }} 用于输出对象属性和函数返回值。
<div id="vue_det">
<h1>site : {
{
site}}</h1>
<h1>url : {
{
url}}</h1>
<h1>{
{
details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: “1234567",
url: “www.baidu.com",
},
methods: {
details: function() {
return this.site;
}
}
})
</script>
2-v-text和v-html
使用v-text和v-html指令来替代{
{}},属于单项绑定
说明:
v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
示例:
HTML:
<div id="app">
v-text:<span v-text="hello"></span> <br/>
v-html:<span v-html="<br>hello<br>"></span>
</div>
3-v-bind
属性绑定
html属性不能使用双大括号形式绑定,只能使用v-bind指令
在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组
data:{
Url:”www.baidu.com"
}
比如img标签里面的src属性
<img :src = “Url"/>
或者
<img v-bind:src = “Url"/>
v-bind (style绑定)
//绑定css样式
<div v-bind:style="baseStyles"></div>
//数据部分
data: {
baseStyles: {
'background-color': 'red'}
}
//如果绑定多个css样式,用数组表示
<div v-bind:style="[baseStyles,overridingStyles]"></div>
data: {
baseStyles: {
'background-color': 'red'},
overridingStyles: {
border: '1px solid black'}
}
//对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
v-bind class样式绑定
<div id="app">
<div v-bind:class="activeClass"></div>
<div v-bind: