Vue.js的模板语法
1.数据绑定的最常见的方法是插值法,写法{{}}
2.输出html代码,命令为v-html
例如:
<div id="app">
<p v-html="">
</p>
<div>
<script>
new Vue({
el: '#app',
data:{
message:'<h1>加油,Abby</h1>'
}
})
</script>
3.属性绑定命令v-bind
例如:
.class1{
background: #444;
color: #eee;
}
<div id="app">
<p>{{5+5}}</p>
<p v-bind:class=“‘calss1’ : use”>你好</p>
</div>
<script>
new Vue({
el:'#app',
data:{
use:false;
}
})
</script>
4.v-if根据表达式的true和false决定是否执行下面的语句
5.v-model实现数据的双向绑定
例如:
<div id="app">
<p>{{result}}</p>
<p v-model="result"></p>
</div>
<script>
new Vue({
el:'#app';
data:{
result:'你好'
}
})
</script>
注意:v-model是用在input,select、textarea、checkbox、radio表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
6.v-on 用来实现监听事件
例如:
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverses">点击反转</button>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'abcd'
},
methods:{
reverses:function(){
return this.message=this.message.spilt('').reverse().join('');
}
}
})
</script>