v-bind 控制HTML的属性
冒号后的是指令.
注意！！冒号前后别打空格！不然代码无效
HTML
<\div v-bind:id = "'list-' + id">Hello, World!<\/div>
CSS
#list-1{
color:red
}
JS
var vm = new Vue({
el:"#app",
data:{
id : 1
}
})
v-bind指令也可以缩写，比如上面的可以改成
<\div :id="'list-' + id">Hello, World!<\/div>
算是给这个经常用到的指令的福利吧
指令v-if 例子是根据seen的值判断是否要让元素显示
HTML
<\div id="app">
<\p v-if="seen">now you can't see me<\/p>
<\/div>
JS
var vm = new Vue({
el:"#app",
data:{
seen: false
}
})
v-on监听事件，对用户的操作进行响应
html
<\div id="app">
<\p>{{ message }}<\/p>
<\button v-on:click="reverseMessage">反转字符串<\/button>
<\/div>
js
var vm = new Vue({
el:"#app",
data:{
message:"hello, world!"
},
methods:{
reverseMessage:function () {
this.message = this.message.split('').reverse().join('')
}
}
})
点击后：!dlrow ,olleh
一点旁白。。。
如果
this.message = this.message.split('').reverse()
没有加上.join(''), 那还是和昨天使用的，直接在message上写方法一样，返回
[ "!", "d", "l", "r", "o", "w", " ", ",", "o", "l", "l", "e", "h" ]一个字符串数组
v-on也有一个简写形式，比如上式可以改成
<\button @click="reverseMessage">反转字符串<\/div>
过滤器
html
<\div id="app">
<\p>{{ message | capitalize }}<\/p>
<\/div>
js
var vm = new Vue({
el:"#app",
data:{
message:"hello, world!"
},
filters:{
capitalize: function (value) {
if(!value){
return ""
} else {
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
})
charAt(0),取得了第一个字符，并把它变成大写，再和后续字符链接。
过滤器可以串联
如：
{{ message | filterA | filterB }}
也可以接受参数
{{ message | filterA('arg1', arg2)}}
v-if v-else指令
html
<\div id="app">
<\div v-if="Math.random()>0.5">{{ message1 }}<\/div>
<\div v-else>{{ message2 }}<\/div>
<\/div>
js
var vm = new Vue({
el:"#app",
data:{
message1:"hello, world!",
message2:"sorry"
}
})
Math.random()取0.0到1.0之间的一个随机数
vue2.1以后还增加了一个v-if的else-if块，可以链式的多次使用:
<\div id="example-1">
<\div v-if="type === 'A'">{{ messageA }}<\/div>
<\div v-else-if="type === 'B'">{{ messageB }}<\/div>
<\div v-else="type === 'C'">{{ messageC }}<\/div>
<\/div>
var vm = new Vue({
el:"#example-1",
data:{
messageA:"i am A",
messageB:"i am B",
messageC:"i am C",
type : "B"
}
});
打印出的是：i am B