前端开发之VUE介绍与使用( 二 ) _VUE

<p class="gDiv" :style="{fontSize:fs, color: c}"> 这也是测试style属性 </p>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: ['这是msg里面的第一个值', '这是msg里面的第二个值'],
v_style:{
color:'green',
},
F: 'First',
S: 'Second',
c1: 'rDiv',
c2: 'br',
s1: {
// 'font-size': '20px'
fontSize: '20px',
color: 'pink'
},
fs: '15px',
c: 'orange'
},
methods:{
action1:function () {
if(this.c1 == 'rDiv'){
this.c1 = 'gDiv';
}else{
this.c1 = 'rDiv';
}
},
},
});
</script>

文章插图
<div id="app">
<form action="">
<p> <input type="text" v-model="val" name="user"> </p>
<p> <input type="text" v-model="val"> </p>

<p>
男: <input v-model="r_val" value=https://www.isolves.com/it/cxkf/bk/2021-10-22/"male" type="radio" name="sex">
女: <input v-model="r_val" value=https://www.isolves.com/it/cxkf/bk/2021-10-22/"female" type="radio" name="sex">
</p>

<p>
男: <input v-model="c_val" value=https://www.isolves.com/it/cxkf/bk/2021-10-22/"m" type="checkbox" name="h">
女: <input v-model="c_val" value=https://www.isolves.com/it/cxkf/bk/2021-10-22/"f" type="checkbox" name="h">
哇塞: <input v-model="c_val" value=https://www.isolves.com/it/cxkf/bk/2021-10-22/"mf" type="checkbox" name="h">
</p>
<button type="submit">提交</button>
</form>
</div>
new Vue里面的data下：
val: '',
r_val: 'female',
c_val: ['m','mf'],