Vue之样式绑定

样式绑定
class绑定
使用方式:v-bind:,expression的类型:字符串、数组、对象
style绑定
v-bind:style=“expression”, expression的类型:字符串、数组、对象

示例:
<--定义示例样式-->

1
2
3
4
5
6
7
8
9
10


    fafa



   
    fafa


   
    aaa
   

   
    bbb
   

    test


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var vm = new Vue({
    el: "#app",

    data: {
        fc: 'fontClass',
        ac: ['fontClass', 'colorClass'],

        fontSize: 40,
        color: 'green',

        //样式对象,注意:样式名使用驼峰命名,如:fontSize
        myStyle: {
            fontSize: '50px',
            color:'red',
            fontWeight: 'bold'
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
事件修饰符
几个常用的事件修饰符:

示例:

接收消息:{{receverMsg}}


   
   
   
   



   
   


       
       
       
   


var vm = new Vue({

    el: "#app",

    data: {
        receverMsg: null,
        sendMsg: null
    },

    methods: {
        sender: function() {
            this.receverMsg = this.sendMsg;
        },
        doSubmit: function() {
            alert('ok');
        }
    }

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符。
示例:


var vm = new Vue({

    el: "#app",

    data: function() {
        return {
            name: 'hello vue'
        }
    },

    methods: {
        doSubmit: function() {
            alert("响应enter," + this.name);
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
常用控件
4.1 常用控件示例
通过实现一个类型注册的页面,熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表


   

       
       
   

   

       
       
   

   

       
       
   

   

       
       
       
   

   

       
       

            {{h.name}}
       

   

   

       
       
   

   

       
       
   

   

        是否已阅读并同意协议
   

   

       
   


var vm = new Vue({

    el: "#app",

    data: {
        uname: '',
        upwd:'',
        age:'',
        sex: 1,

        //用于通过v-for指令输出多选框列表
        hobbies:[
            {id: '1', name:'打游戏'},
            {id: '2', name:'编程'},
            {id: '3', name:'旅游'}
        ],
    
        /*
         * 用于通过v-model双向绑定,保存用户的选择。
         * 此处为多选,需要通过数组接收,否则无法
         * 正常接收复选框的值,且复选框的行为也不正常,
         * 可能出现要么全部被选择,要么全部被取消的情况
         */
        hobby:[],

        remark: null,

        //用于生成地区选择列表
        city:[
            {id:"1", name:"长沙"},
            {id:"1", name:"株洲"},
            {id:"1", name:"湘潭"}
        ],

        //用于保存用户选择的地区
        selectedCity: '',

        //是否同意协议,默认值为false
        agreed:false,

        //提交按钮是否禁用,默认为true
        disabled: true
    },

    //监控agreed属性,如果同意协议则将提交按钮
    //设置为可用,否则提交按钮为禁用状态
    watch: {
        agreed: function(val) {
            if(val) {
                this.disabled = false;
            }else{
                this.disabled = true;
            }
        }
    },

    methods: {
        submit: function() {
            let data = {
                uname: this.uname,
                upwd: this.upwd,
                age:this.age,
                sex: this.sex,
                hobby: this.hobby,
                city: this.selectedCity,
                remark: this.remark
            }
            console.log(data);
        }
    }

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
不使用监视器的简单方式: 删除监听器,然后将提交按钮的做如下修改

你可能感兴趣的:(javascript,vue.js,前端)