1.文本双向绑定:
语法:{{ var}}
实例:
文本插值
<div id="app"> <p>{{ message }}</p> </div>
<script>
new Vue({ el: '#app', data: {
message: '<h1>菜鸟教程</h1>'
} })
</script>
2.input 输入绑定:
语法: v-model="object"
实例:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({ el: '#app',
data: {message:'Runoob!'
} })
</script>
表单例子v-mdoel:
<div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名: </span> <input type="text" v-model="username"><br> <span>密码: </span> <input type="password" v-model="pwd"><br> <span>性别: </span> <input type="radio" id="female" value="女" v-model="sex"> <label for="female">女</label> <input type="radio" id="male" value="男" v-model="sex"> </form> </div> <script type="text/javascript"> new Vue({ el: '#demo', data: { username: '', pwd: '', sex: '男', likes: ['foot'], allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}], cityId: '', info: '' }, methods: { handleSubmit () { console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info) alert('提交注册的ajax请求') } } }) </script>
3.v-for:循环数组或者对象:
例子:数组取值
<div id="app"> <ol> <li v-for="vlaue in sites"> {{ value.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
对象循环:
v-for 可以通过一个对象的属性来迭代数据:
两个参数:
三个参数 value,key,index
v-if-else:
v-bind简写 也可为 :
例子: