vuejs--基本指令2

本文链接： https://blog.csdn.net/RyleeLouth/article/details/102758137

v-model 收集表单信息

checkbox

1，单个复选框
复选框选中为true，否则为false
模型变量属性值为布尔类型

<body>
<div>
    <input type="checkbox" v-model="isAgree">{{ isAgree ? '同意':'不同意' }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'div',
        data:{
            isAgree:'true'
        }
    })
</script>
</body>

2，多个复选框，例如选择兴趣爱好的时候，这个时候复选框里面要有一个value，模型里面要有一个数组去接收选中的值

<body>
<div>
    爱好：<input type="checkbox" value="basketball" v-model="hobby">篮球
          <input type="checkbox" value="football" v-model="hobby">足球
          <input type="checkbox" value="swimming" v-model="hobby">游泳
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'div',
        data:{
            hobby:[]
        }
    })
</script>
</body>

radio单选框

1 radio里面要有value值，因为选中是可以获取它的value值
2，模型变量是一个普通字符串，就是其中一个value值

 <body>
<div>
    性别：<input type="radio" value="male" v-model="gender">男
          <input type="radio" value="female" v-model="gender">女
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'div',
        data:{
            gender:'male'
        }
    })
</script>
</body>

select 下拉框

1，只能选中单个选项，
关于value值：有value:收集value值
没有value值，收集标签之间的数据

<body>
<p>
    <select name="" id="" v-model="area">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "p",
        data: {
            area:"北京"
        }
    })
</script>
</body>

2，可选多个选项
模型变量是一个数组，去接收选中的值

<body>
<p>
    <select name="" id="" v-model="area" multiple>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "p",
        data: {
            area:[]
        }
    })
</script>
</body>

v-bind 给标签的属性进行值的设定，简写为：

img标签的src属性

  1，直接写插值表达式，会把引号里面的内容当成地址尝试进行网络请求

		< img src=" {{ logo }}"/ >

	正确写法

html:
注意：1，引号里面不要再写插值表达式了
-------- 2，如果用v-bind ，非要在src里面写网址的话，要给网址加上引号，而且外双内单，外单内双

< img v-bind:src=" logo "/ >

或者

<img v-bind:src="'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1572080530&di=e6d15890a33a96d1acfda455dafbd2d5&src=http://www.krabiandamantour.com/images/krabitour/4islands-koh-hong-by-speedboat/koh-tup-(tup-Island)-talay-waek-krabi-Islands-1.jpg '">

js:

<script>
    var vm = new Vue({
        el: "p",
        data: {
            logo:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1572080530&di=e6d15890a33a96d1acfda455dafbd2d5&src=http://www.krabiandamantour.com/images/krabitour/4islands-koh-hong-by-speedboat/koh-tup-(tup-Island)-talay-waek-krabi-Islands-1.jpg'
        }
    })
</script>

设置class类名
```
  **设置单个类名**
```

<p v-bind:class="class1"></p>

js:

<script>
    var vm = new Vue({
        el: "p",
        data: {
            class1:'a'
        }
    })
</script>

**设置多个类名**

html：标签里面class中有一个数组去接收所有类名

 <p v-bind:class="[class1,class2,class3]"></p>

有多个class名还有一个字符串：class会合并

 <p v-bind:class="[class1,class2,class3，'d' ]"></p>//有a,b,c,d四个class名

本身有class属性，再绑定别的class可以合并

 <p class="d" v-bind:class="[class1,class2,class3]"></p>//有d,a,b,c四个class名

js：这里写多个class名

 data: {
            class1:'a',
            class2:'b',
            class3:'c'
        }

设置行内样式style

  设置单个style属性：模型变量里面style可以为字符串，也可以为对象


    <p v-bind:style="style1"></p>
    <p v-bind:style="style2"></p>

设置多个style属性:模型变量必须为对象，style里面有一个数组

 <p v-bind:style="[style2,style3]"></p>

font-size等用中横线分割的属性有两种方法书写，
1.冒号两边的属性和属性值都用引号包起来2.使用小驼峰命名属性名

 <p v-bind:style="style4"></p>
    <p v-bind:style=" style5"></p>

	直接在标签里面写，要写在对象里面，而且不同属性用逗号隔开

	<p v-bind:style="{fontSize:'30px',lineHeight:'18px'}"></p>

js：

 data: {
            style1:'bacground:#ccc',
            style2:{
                background:"red"
            },
            style3:{
            	border:"1px solid #ccc"
            },
             style4:{
                'font-size':'18px'
            },
            style5:{
                fontSize:'18px'
            }
       
        }

v-on 事件绑定，简写为@

原生js中事件书写函数调用是要写括号的

<button onclick="fn()">点击</button>//函数调用是要写括号的

v-on 中
- 函数调用可以不写括号，也可以写
- 使用v-on 不要再事情前面加上on

 <button v-on:click="fn1">点我</button>
   <button v-on:click="fn2()">点我</button>

加括号和不加括号的区别

  +加括号：需要手动添加$event 事件源，$event是vuejs帮我们封装好的事件源
  +不加括号：会自动给回调函数传递一个事件源
  如何取舍？
  当需要传参时选择加括号的，不需要传参时选择不加括号的

v-on 调用时需要传参
+1,…rest是剩余运算符，可以将所传参数以数组的形式展开
+2, 剩余运算符只能写在最后面

<button v-on:click="fn1">点我</button>
<button v-on:click="fn2($event,'a','b')">点我</button>

js：

methods:{
                fn1(event){
                    console.log(event)//MouseEvent {isTrusted: true, screenX: 85, screenY: 103, clientX: 85, clientY: 32, …}
                },
                fn2(event,...rest){
                    console.log(event)//MouseEvent {isTrusted: true, screenX: 85, screenY: 103, clientX: 85, clientY: 32, …}
                    console.log(rest)//["a", "b"]
            	}
        }

v-model 收集表单信息

checkbox

radio单选框

select 下拉框

v-bind 给标签的属性进行值的设定，简写为：

img标签的src属性

设置class类名

设置行内样式style

v-on 事件绑定，简写为@

原生js中事件书写函数调用是要写括号的

v-on 中

加括号和不加括号的区别

v-on 调用时需要传参

猜你喜欢