Vue基础条件渲染,事件处理,双向绑定,表单控制

1 条件渲染

1.1 通过`v-if`和 `v-for`渲染3

通过判断返回数据是否有值, 有值渲染到html中, 没有显式空空如也字样

 1 注意: 本例复制最全, 后续将不再复制头尾, 只有重要内容
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <script src="js/vue.js"></script>
 8 </head>
 9 <body>
10 <div id="box">  
11     <ul v-if="shopping.length>0">    // 判断长度, 大于0证明有值, 进行循环渲染
12         <li v-for="data in shopping">{{data}}</li>
13     </ul>
14     <ul v-else>空空如也</ul>
15 </div>
16 <script>
17     new Vue({
18         el: "#box",  // 选中标签
19         data:{
20             shopping:[1,1,3]  // 显式数据
21         },
22     })
23 </script>
24 </body>
25 </html>

1.2 `v-if` and `v-else-if` or `v-else` 使用

选择性打印内容, 当if条件满足时渲染if标签内容, 再判断else-if中内容是否满足, 满足渲染, 否则渲染最后的else标签内容

 1 <body>
 2 <div id="box">
 3     <div v-if="which===1">1111</div>
 4     <div v-else-if="which===2">2222</div>
 5     <div v-else>3333</div>
 6 </div>
 7 <script>
 8     new Vue({
 9         el: "#box",
10         data:{
11             which: 1  // 决定渲染标签变量
12         },
13     })
14 </script>
15 </body>

2 列表渲染

2.1 for循环数组，对象

数组的 for 循环语法: v-for="变量 in 数组",

循环着打印数组中的内容

 1 <body>
 2 <div id="box">
 3     <p v-for="data in arr">{{data}}</p>
 4 </div>
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         data: {
 9             arr: ["sz", "li", "ch"],
10         },
11     })
12 </script>
13 </body>

循环对象 for 语法 : v-for="变量 in 对象",

循环对象时渲染到html页面的是value值, 而不是key

 1 <body>
 2 <div id="box">
 3     <p v-for="das in obj">{{das}}</p>
 4 </div>
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         data: {
 9             obj: {name: "chen", age: 19, sex: "male"}
10         },
11     })
12 </script>
13 </body>

循环数组索引和value

语法: v-for="(item,value) in 数组" 需要些两值, 需要知道的是,渲染时 item和value是反过来的.

 1 <body>
 2 <div id="box">
 3     <p v-for="(item,value) in arr"> {{value}}  {{item}}</p>
 4 </div>
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         data: {
 9             arr: ["sz", "li", "ch"],
10         },
11     })
12 </script>
13 </body>

循环对象key和value

语法: v-for="(key,value) in 对象"

 1 <body>
 2 <div id="box">
 3     <p v-for="(key,value) in obj"> {{value}}  {{key}}</p>
 4 </div>
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         data: {
 9             obj: {name: "chen", age: 19, sex: "male"}
10         },
11     })
12 </script>
13 </body>

2.2 key值的解释

1 v-for循环数组，对象时，建议在控件（组件，标签）写一个key属性，属性值唯一
2 页面更新以后，加速dom的替换（渲染）,虚拟dom的替换diff算法
3 :key="变量"

2.3 数组更新与检测

1. 数据双向绑定，数据变化，页面变，页面变化数据变

2. 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse

3. 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组

-页面不会更改：vm.arr.concat(['44','55'])
-解决vm.arr=vm.arr.concat(['44','55'])

4. 页面不会更改：通过索引值更新数组

1 -解决方案一：
2 vm.arr[0]
3 "11"
4 vm.arr[0]='99'
5 "99"
6 vm.arr.splice(0,1,'88')
7 ["99"]
8 -解决方案二
9 Vue.set(vm.arr,0,'lqz')

5. 上面能更新是因为作者重写了那些方法

3 事件处理

blur:失去焦点触发
change：失去焦点触发，跟blur一样
input:数据发生变化，就会触发

3.1 input/blur/change案例

input过滤案例

当数据发生变化是, 触发后执行过滤函数, 起到提示效果

 1 <body>
 2 <div id="box">
 3     <input type="text" v-model="myinput" @input="handleChange">   {{myinput}}
 4     <br>
 5     <!--    打印数据-->
 6     <div>
 7         <p v-for="data in new_arr">{{data}}</p>
 8     </div>
 9 </div>
10 <script>
11     new Vue({
12         el: "#box",
13         data:{
14             myinput:'',
15             arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
16             new_arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
17         },
18         methods:{
19             handleChange(){
20                 //控制arr的变化，数据又双向绑定了，页面就会变化
21                 this.new_arr=this.arr.filter(item=>{  // 使用es6语法 匿名箭头函数
22                    return item.indexOf(this.myinput) >-1  //完全匹配, 与正则匹配一样, 没有头尾
23                 })
24                 解释上述代码:
25                 为什么要定义两个arr数组? 如果只定义一个DOM检测不到发生变化则显示不会变化
26             }
27         }
28     })
29 </script>
30 </body>

blur失去焦点执行案例

 1 <body>
 2 <div id="box">
 3     <input type="text" v-model="myinput" @blur="handleChange">   {{myinput}}
 4 </div>
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         data:{
 9             myinput:'',
10         },
11         methods:{
12             handleChange(ev){
13                 console.log(ev)  //网页控制台查看
14             }
15         }
16     })
17 </script>
18 </body>

change数据发生改变案例

需要焦点消失后才会执行

 1 <body>
 2 <div id="box">
 3     <input type="text" v-model="myinput" @change="handleChange">   {{myinput}}
 4 </div>
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         data:{
 9             myinput:'',
10         },
11         methods:{
12             handleChange(){
13                 console.log(this.myinput)  // 控制台查看打印内容, 输入框输入什么控制台打印什么
14             }
15         }
16     })
17 </script>
18 </body>

3.2 简单事件

有时候需要对一些数据进行展开和折叠, 如下案例

三种方式

 1 <body>
 2 <div id="box">
 3 <!--    标签中添加表达式-->
 4     <button @click="isShow=!isShow">点我折叠，展开</button>
 5 <!--    js函数中操作-->
 6     <button @click="handleChange">点我折叠，展开2</button>
 7     <button @click="handleChange">点我折叠，展开2,传递event事件</button>
 8 <!--    打印数据-->
 9     <div v-show="isShow">
10         <p v-for="data in arr">{{data}}</p>
11     </div>
12 </div>
13 <script>
14     new Vue({
15         el: "#box",
16         data:{
17             isShow: true,
18             arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
19         },
20         methods:{
21             handleChange(ev){
22                 console.log(ev)
23                 this.isShow=!this.isShow  // 取反操作
24             }
25         }
26     })
27 </script>
28 </body>

3.3 事物修饰符

.stop 阻止事件冒泡
.self 只处理自己的事件，子控件冒泡的事件不处理

.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)

.self只处理自己的事件，子控件冒泡的事件不处理

 1 <body>
 2 <div id="box">
 3     <ul @click.self="handleUl">
 4         <li v-for="data in datalist" @click.self="handleLi($event)">{{data}}</li>
 5     </ul>
 6 </div>
 7 <script>
 8     new Vue({
 9         el: "#box",
10         data:{
11             datalist:["chen","shao", "liu"]
12         },
13         methods:{
14             handleLi() {
15                 console.log('li被点击了')
16             },
17             handleUl() {
18                 console.log('Ul被点击了')
19             },
20         }
21     })
22 </script>
23 </body>

.stop 阻止事件冒泡

1 box中加上即可验证, 控制台哦
2 <li v-for="data in datalist" @click.stop="handleLi">{{data}}</li>

.once 只处理一次就解绑(抽奖页面)

1 点击后失效
2 <li v-for="data in datalist" @click.once="handleLi">{{data}}</li>

.prevent 阻止a链接跳转

 1 <body>
 2 <div id="box">
 3     <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
 4 </div>
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         methods:{
 9             handleA(ev) {
10                 console.log('a被点击了')
11                 ev.preventDefault() //阻止a标签的跳转
12             }
13         }
14     })
15 </script>
16 </body>

3.4 按键修饰符

1 敲击回车键干一个事, 监听回车事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="box">
10     // 方法1
11     <input type="text" v-model="myinput" @keyup.enter="handleKey">
12     // 方法2 直接写表达式
13     <input type="text" v-model="myinput" @keyup.13="handleKey">
14 </div>
15 <script>
16     new Vue({
17         el: "#box",
18         data:{
19             myinput: ''
20         },
21         methods:{
22             handleKey(ev){
23                 console.log(ev)  // 默认会把事件传到函数内
24                 if(ev.keyCode===13){
25                     // 按下回车后控制台打印数据
26                     console.log('回车被按下了')
27                 }
28             }
29         }
30     })
31 </script>
32 </body>
33 </html>

4 数据双向绑定

4.1 `v-model` 的使用

当表单数据发生变化是自动绑定到模板变量位置

之前已经介绍了, 这里简单例子

 1 <body>
 2 <div id="box">
 3     <input type="text" v-model="myinput">{{myinput}}
 4     <hr>
 5     <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
 6     <br>
 7     {{text}}
 8 </div>
 9 <script>
10     new Vue({
11         el: "#box",
12         data:{
13             myinput:'',
14             text: ''
15         },
16     })
17 </script>
18 </body>

5 表单控制

5.1 checkbox选中

当check为false时, 选中取消

 1 <body>
 2 <div id="box">
 3     <input type="checkbox" v-model="check"> 记住密码
 4     <br>
 5     {{check}}
 6 </div>
 7 <script>
 8     new Vue({
 9         el: "#box",
10         data:{
11             check: true
12         },
13     })
14 </script>
15 </body>

5.2 多选

 1 <body>
 2 <div id="box">
 3     <input type="checkbox" v-model="checkgroup" value="python"> python
 4     <input type="checkbox" v-model="checkgroup" value="java"> java
 5     <input type="checkbox" v-model="checkgroup" value="html"> html
 6     <br>
 7     {{checkgroup}}
 8 </div>
 9 <script>
10     new Vue({
11         el: "#box",
12         data:{
13             checkgroup: []  // 使用列表存放, 否则是单选
14         },
15     })
16 </script>
17 </body>

5.3 单选

 1 // arr只能保存一个字符串, 所以用来设置单选
 2 <body>
 3 <div id="box">
 4     <input type="radio" v-model="arr" value="男">男
 5     <input type="radio" v-model="arr" value="女">女
 6     <input type="radio" v-model="arr" value="未知">未知
 7 </div>
 8 <script>
 9     new Vue({
10         el: "#box",
11         data:{
12             arr:''
13         },
14     })
15 </script>
16 </body>

5.4 购物车案例

选中商品后计算价格

 1 <body>
 2 <div id="box">
 3     <ul>
 4         <li v-for="item in datalist">
 5             <input type="checkbox" :value="item" v-model="checkgroup">
 6             品名: {{item.name}} 数量:{{item.number}} 价格:{{item.price}}元
 7         </li>
 8     </ul>
 9     当前价格为: {{getPrice()}} 元
10     <br>
11 </div>
12 <script>
13     new Vue({
14         el: "#box",
15         data:{
16             datalist:[
17                 {name: '丰田', price: 100, number: 6, id: '1'},
18                 {name: '本田', price: 1000, number: 3, id: '2'},
19                 {name: '景田', price: 3330, number: 2, id: '2'},
20             ],
21             checkgroup:[]
22         },
23         methods:{
24             getPrice(){
25                 var sum_price = 0;
26                 for (i in this.checkgroup){
27                     sum_price += this.checkgroup[i]["number"]*this.checkgroup[i]["price"]
28                 }
29                 return sum_price
30             }
31         }
32     })
33 </script>
34 </body>

5.5 单选&多选&全选&取消全选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="box">
10     <input type="checkbox" v-model="isAll" @change="handleCheck"> 全选或取消全选
11     <ul>
12         <li v-for="item in datalist">
13             <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
14             品名: {{item.name}} 数量:{{item.number}} 价格:{{item.price}}元
15         </li>
16     </ul>
17     <br>
18 </div>
19 <script>
20     new Vue({
21         el: "#box",
22         data: {
23             datalist: [
24                 {name: '丰田', price: 100, number: 6, id: '1'},
25                 {name: '本田', price: 1000, number: 3, id: '2'},
26                 {name: '景田', price: 3330, number: 2, id: '2'},
27             ],
28             checkgroup: [],
29             isAll:false
30         },
31         methods: {
32             // 全选取反
33             handleCheck() {
34                 if (this.checkgroup.length > 0) {
35                     this.checkgroup = []
36                     // this.isAll = true
37                 } else {
38                     this.checkgroup = this.datalist
39                 }
40             },
41             // 单选
42             handleOne() {
43                 if (this.checkgroup.length === this.datalist.length) {
44                     this.isAll = true
45                 } else {
46                     this.isAll = false
47                 }
48             }
49         }
50     })
51 </script>
52 </body>
53 </html>

posted @ 2020-06-02 15:50 π陈少π 阅读(156) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

青山裘

Vue基础条件渲染,事件处理,双向绑定,表单控制

1 条件渲染

1.1 通过`v-if`和 `v-for`渲染3

1.2 `v-if` and `v-else-if` or `v-else` 使用

2 列表渲染

2.1 for循环数组，对象

2.2 key值的解释

2.3 数组更新与检测

3 事件处理

3.1 input/blur/change案例

input过滤案例

blur失去焦点执行案例

change数据发生改变案例

3.2 简单事件

3.3 事物修饰符

3.4 按键修饰符

4 数据双向绑定

4.1 `v-model` 的使用

5 表单控制

5.1 checkbox选中

5.2 多选

5.3 单选

5.4 购物车案例

5.5 单选&多选&全选&取消全选

公告

青山裘

Vue基础条件渲染,事件处理,双向绑定,表单控制

1 条件渲染

1.1 通过v-if和 v-for渲染3

1.2 v-if and v-else-if or v-else 使用

2 列表渲染

2.1 for循环数组，对象

2.2 key值的解释

2.3 数组更新与检测

3 事件处理

3.1 input/blur/change案例

input过滤案例

blur失去焦点执行案例

change数据发生改变案例

3.2 简单事件

3.3 事物修饰符

3.4 按键修饰符

4 数据双向绑定

4.1 v-model 的使用

5 表单控制

5.1 checkbox选中

5.2 多选

5.3 单选

5.4 购物车案例

5.5 单选&多选&全选&取消全选

公告

1.1 通过`v-if`和 `v-for`渲染3

1.2 `v-if` and `v-else-if` or `v-else` 使用

4.1 `v-model` 的使用