目录
㋀㏫
✎ input 元素
<input type="text" v-model="myValue">
{{myValue}}◆ v-model 修饰符
❶ lazy
input.lazy:当输入的时候完成输入/enter/失去焦点，才会更新值
<input type="text" v-model.lazy="myValue">
{{myValue}}❷ number
input.number:输入的值强制转换成数字
<input type="text" v-model.number="myValue">
{{typeof myValue}}◆ v-model 和 v-bind 区别
两者都可以绑定数据，但是修饰符不同，要求不同，v-model可以lazy、number，但是数据必须变量生命和初始化，v-bind则不用。
✎ 单选框和多选框
❶ radio和checkbox
<!-- 多选框：checkbox，单选框：checkbox -->
<input type="checkbox" v-model="myBox" value="apple">apple
<input type="checkbox" v-model="myBox" value="banana">banana
<input type="checkbox" v-model="myBox" value="pinaapple">pinaapple
{{myBox}}✎ 下拉框
❶ select
<select v-model="selection">
<option value="1">1</option>
<option value="2">2</option>
</select>❷ select 和 v-for
下拉框和v-for作用可以抽象出一个vSelect组件<vSelect @onSelct="" :list="selectOptions"></vSelect>， change的时候可以利用$emit传递数据。
<select v-model="selection">
<!-- 在这里value没有使用动态绑定，因为在vue.js里面如果不使用动态绑定的时候，value默认是item.value字符串，如果想要一个变量放进去，就是类似“ href=''link' ”前面加引号“ :href:'link' ”-->
<option v-for="item in selectOptions" :value="item.value">{{item.text}}</option>
</select>
{{selection}}✎ 资源附件
<script>
import comA from './components/a'
export default {
data() {
return {
selectOptions: [{
text: 'apple',
value: 0
},
{
text: 'banana',
value: 1
},
],
selection: null,
myValue: '',
myBox: [],
}
},
components: {
comA /* comA:comA es6语法 */
},
methods: {
onComaMyEvent(paramsFromChild) {
// 自定义事件如何触发呢？1.child.vue中先定义
console.log('onComaMyEvent,' + paramsFromChild)
}
}
}
</script>
<style>
</style>
