菜鸟在线测试工具:http://www.runoob.com/try/try.php?filename=vue2-v-bind
1,数据绑定:{{message}}
2,html 代码输出:v-html
3,属性值绑定:v-bind,可缩略不写。
4,表单双向数据绑定:v-model,改变表单输入值,或者改变js参数值都会同步更改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.add_class{
background: #444;
color: #eee;
}
</style>
</head>
<body>
<div id="app">
<p>{{ message1 }}</p>
<div v-html="message2"></div>
<br><br>
<label for="r1">勾选后修改颜色</label><input type="checkbox" v-model="checked" id="r1">
<br><br>
<div v-bind:class="{'add_class': checked}">
v-bind:class 指令
</div>
<br><br>
<a :href="url">v-bind:href 指令</a>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message1: '数据绑定',
message2: '<h1>html内容绑定</h1>',
checked: true,
url: 'https://www.baidu.com/'
}
}
})
</script>
</body>
</html>
5,表达式:
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
6,其他指令:v-if,v-on。其中v-on可以缩写为@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
<button @click="doSomething">缩写绑定v-on</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
seen: true,
message: 'Runoob!'
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
},
doSomething: function () {
this.message = 'you are right!'
}
}
})
</script>
</body>
</html>
7,过滤器:| ,可以有多个过滤器,也可以带参数,默认过滤值为过滤器的第一个参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message | filterA | filterB('hello','world') }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
filterA: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
filterB: function (value,arg1,arg2) {
return value + arg1 + arg2
}
}
})
</script>
</body>
</html>