1、内容绑定
将data中的数据显示成内容
<div id='app'>
<p>{{msg}}</p>
</div>
若想显示html标签只要是标签中用v-html即可
<div id='app'>
<p v-html>{{msg}}</p>
</div>
2、属性绑定
将data中的数据作为某个元素的属性值
使用v-bind即可，属性可以是内置的，也可以自定义的,简写方式:
<p v-bind:id="id" :class="class">{{msg}}</p>
3、表单标签的值
可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
1、文本框和文本域
<input type:'text' v-model="msg"></input>
<textarea v-model:'msg'><textarea>
2、复选框
<div id='app'>
<lable for:'swim'><lable>
<input type='checkbox' id=swim v-model='isSwim'/>
<label for="read">阅读</label>
<input type="checkbox" id="read" v-model="isRead">
<label for="play">游戏</label>
<input type="checkbox" id="play" v-model="isPlay">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
isSwim:true,
isRead:true,
isPlay:false
}
})
</script>
单选框
<div id="app">
<label for="man">男</label>
<input type="radio" id="man" value="man" v-model="gender">
<label for="women">女</label>
<input type="radio" id="women" value="women" v-model="gender">
{{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
gender:''
}
})
</script>
下拉框
<div id="app">
<select v-model="city">
<option disabled value="">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
{{city}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
city:""
}
})
</script>
传递参数
<div id='app'>
<button v-on:click="showInfo('hello')">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
title:"元旦"
},
methods:{
showInfo:function(message){
console.log(message)
}
}
})
</script>