4.vue class 绑定- model基础应用
//代码可以复制自行体验
<template>
<div id="app" @click.stop="test('你点击了我big-div')">
<P :class="{test:isElseTrue}">hahaha</P>
<p :class="class1">hjaasdasd</p>
<p :style="styleclass">hahahaha</p>
<p @click.stop="test('你惦记了我')">b:hahahaha</p>
<input @keyup.65="test('你按下了a')"><br/>
<input type="checkbox" id="bask" v-model="bool" value="篮球">
<label for="bask">篮球</label>
<input type="checkbox" id="foot" v-model="bool" value="足球">
<label for="foot">足球</label>
<input type="checkbox" id="ym" v-model="bool" value="羽毛球">
<label for="ym">羽毛球</label>
<p>{{bool}}</p>
<input type="radio" id="man" v-model="sex" value="男">
<label for="man">男</label>
<input type="radio" id="nv" v-model="sex" value="女">
<label for="nv">女</label>
<p>{{sex}}</p>
<select name="" id="" v-model="sel">
<option value="杭州">杭州</option>
<option value="北京">北京</option>
</select><br/>
<select name="" id="" v-model="sel">
<option v-for='(city,index) in arr' :key='index' :value='city'>{{city}}</option>
</select>
<p>{{sel}}</p>
<input type="text" v-model.lazy="sel">
<p>{{sel}}</p>
<input type="text" v-model.number="num1">+ //转为数值
<input type="text" v-model.number="num2">=
<input type="text" :value="num1+num2"/><br/>
<input type="text" v-model.trim.lazy="sex">
<p>{{sex}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
sex:[],
arr: ['北京','杭州','上海','深圳'],
num1:0,
num2:0,
bool:[],
isture: false,
isElseTrue:true,
styleclass:{
color: "#155",
backgroundColor:"#f0f"
},
sel:[]
}
},
methods: { //Imethod中写的是对事件处理的处理函数
test:function (aa) {
console.log(aa)
}
},
computed: {
class1: function () {
return {
test : true
}
},
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.test{
color:skyblue;
}
</style>
