Vue的学习(2)
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>
最新文章
- <hr> 的18种样式
- 【USACO 1.3】Barn Repair
- Hibernate+Struts2进行数据的修改
- Ohlàlà
- Winform 文件控件 - 转
- MySQL JDBC的setFetchSize
- MySQL Server类型之MySQL客户端工具的下载、安装和使用
- Linux 网络性能tuning向导
- 如何在页面上输出html标签:符号实体
- qt中的udp编程
- Rational AppScan 标准版可扩展性和二次开发能力简介
- MFC读写配置ini文件
- vscode 编辑markdown文件
- Python NLP完整项目实战教程（1）
- [leetcode]152. Maximum Product Subarray最大乘积子数组
- JVM（一）
- uoj#213. 【UNR #1】争夺圣杯
- Python中让MySQL查询结果返回字典类型的方法
- 关于ajaxFileUpload只能上传一次的解决
- Asp.Net使用百度编辑器(ueditor)