vue 基础语法-下篇

在飞行-米龙

已于 2024-05-18 14:19:32 修改

阅读量778

点赞数 21

分类专栏： Vue 文章标签： vue.js 前端 javascript 前端框架

于 2024-05-08 19:04:08 首次发布

本文链接：https://blog.csdn.net/weixin_48183870/article/details/138582884

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

【5】条件渲染和列表渲染

（1）条件渲染v-if v-else-if v-else

条件渲染根据表达式的真假值来渲染不同的元素或组件。
- v-if：当表达式的值为真时，渲染该元素或组件。
- v-else-if：当前面的 v-if 或 v-else-if 的表达式为假时，会评估这个 v-else-if 的表达式，如果为真，则渲染该元素或组件。
- v-else：当前面的 v-if 和 v-else-if 的表达式都为假时，渲染该元素或组件

<body>
<div id="app">
    <h2>当前分数>>>:{{score}}</h2>
    <h2 v-if="score>=90">文字描述>>>:优秀</h2>
    <h2 v-else-if="score>=60&&score<90">文字描述>>>:及格</h2>
    <h2 v-else>文字描述>>>:不及格</h2>

</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            score: 99
        },
    })
</script>

（2）列表渲染v-for

列表渲染用于渲染一组元素或组件的指令。
- 语法：v-for="(item, index) in items" :key="index"
  - items 是一个数组或对象。
  - item 是当前遍历到的元素或属性值。
  - index 是当前元素的索引（对于数组）或属性的键（对于对象）。
  - :key 是一个绑定，它提供了一个唯一的标识符给每个节点，这对于 Vue 的虚拟 DOM 算法来说是必要的，以便能够高效地更新和重新排序节点。

<body>
<div id="app">
    <h2>整型遍历--(item, index) in 3</h2>
    <ul>
        <li v-for="(item, index) in 3" :key="index">元素：{{item}}, 索引：{{index}}</li>
    </ul>
    <h2>字符串遍历--(item, index) in 'n b'</h2>
    <ul>
        <li v-for="(item, index) in 'n b'" :key="index">元素：{{item}}, 索引：{{index}}</li>
    </ul>
    <h2>数组遍历--(item, index) in infoArray</h2>
    <ul>
        <li v-for="(item, index) in infoArray" :key="index">元素：{{item}}, 索引：{{index}}</li>
    </ul>
    <h2>对象遍历--(item, index) in 'n b'</h2>
    <ul>
        <li v-for="(value, key, index) in infoObj" :key="index">元素：{{key}}:{{value}}, 索引：{{index}}</li>
    </ul>


</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            infoArray: ["n", "b"],
            infoObj: {"name": "bruce", "age": 18}
        },
    })
</script>

【6】input标签事件处理

（1）数据双向绑定v-model

v-model 用于在 input、textarea 或 select 等表单元素上创建双向数据绑定。双向数据绑定意味着，当表单元素的值发生变化时，Vue 实例中的数据也会自动更新；反之，当 Vue 实例中的数据发生变化时，表单元素的值也会相应地更新。
<input type="text" :value="inputText">和<input type="text" v-model="inputText">的区别
- :value="inputText"
  - 它用于单向地绑定数据到元素的 value 属性上。
  - 当 inputText 的值发生变化时，<input> 元素的值会更新，但反过来则不然——即用户输入的值不会更新到 inputText。
  - 这种方式是单向的。
- v-model="inputText"
  - 它不仅仅设置元素的 value 属性，还监听输入事件（如 input 或 change）来更新数据。
  - 当用户在 <input> 元素中输入文本时，inputText 的值会自动更新，同时，如果 inputText 的值在程序的其他部分被改变，<input> 元素的内容也会更新。
  - 这种方式是双向的。

<body>
<div id="app">
    <h2>单向数据绑定":value="inputText"</h2>
    <label>输入框：
        <input type="text" :value="inputText1">
    </label>
    <p>输入框文本>>>:{{inputText}}</p>
    <h2>双向数据绑定v-model="inputText"</h2>
    <label>输入框：
        <input type="text" v-model="inputText2">
    </label>
    <p>输入框文本>>>:{{inputText}}</p>


</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            inputText1: "",
            inputText2: ""
        },
    })
</script>

（2）input标签常用修饰符

.lazy
- 使用 .lazy 修饰符后，v-model 会在 change 事件触发时才更新数据，这通常意味着用户完成输入并离开输入框（如点击输入框外部或按 Tab 键）时，数据才会更新
.number
- 数字类型开头会保留，一单出现非数字，后面的字符不在管
- 非数字开头，保留所有的字符
.trim
- 自动去除用户输入值的前后空格

<body>
<div id="app">
    <h2>v-model.lazy：完成输入并离开触发数据更新</h2>
    <label>输入框：
        <input type="text" v-model.lazy="inputText1">
    </label>
    <p>输入框文本>>>:{{inputText1}}</p>

    <h2>v-model.number：数字开头匹配数字，非数字开头匹配所有</h2>
    <label>输入框：
        <input type="text" v-model.number="inputText2">
    </label>
    <p>输入框文本>>>:{{inputText2}}</p>

    <h2>v-model.trim：去除输入框首位空格</h2>
    <label>输入框：
        <input type="text" v-model.trim="inputText3">
    </label>
    <p>输入框文本>>>:{{inputText3}}</p>

</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            inputText1: "",
            inputText2: "",
            inputText3: "",
        },
    })
</script>

（3）input常用事件处理

input：当输入框进行输入的时候触发的事件
change：当元素的值发生改变时触发的事件
- 只有输入结束以后才会进行判断的是否改变
- 如：输入123，确认以后，在删除23，在输入23是不会触发change事件的
blur：当输入框失去焦点的时候触发的事件
focus：当输入框获得焦点的时候触发的事件

<body>
<div id="app">
    <h2>四个事件可以放在一起</h2>
    <label>输入框：
        <input @input="inputFunc" @focus="focusFunc" @change="changeFunc" @blur="blurFunc" type="text"
               v-model="inputText">
    </label>
    <p>输入框文本>>>:{{inputText}}</p>

</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            inputText: "",
        },
        methods: {
            inputFunc() {
                console.log('触发输入事件')
            },
            focusFunc() {
                console.log('触发获得焦点事件')
            },
            changeFunc() {
                console.log('触发输入改变事件')
            },
            blurFunc() {
                console.log('触发失去焦点事件事件')
            },
        }
    })
</script>

【7】过滤案例

（1）要求

已知一个字符串数组
当输入框输入文本内容时，显示含有文本内容的字符串
当输入框删除部分内容时，显示内容会重新匹配显示匹配成功的字符串

（2）实现效果

过滤函数
- ```
this.newInfoArray = this.infoArray.filter(function (item) {  
    if (item.indexOf(_inputText) >= 0) {  
        return true  
    } else {  
        return false  
    }  
})
```
- this.infoArray.filter(...)：对 infoArray 调用 filter 方法。
- function (item) {...}：这是传递给 filter 的回调函数，它接受数组中的一个元素 item 作为参数。
- item.indexOf(_inputText) >= 0：检查 item 是否包含 _inputText。如果包含（即 indexOf 返回的值大于或等于 0），则返回 true，否则返回 false。
- return true 或 return false：根据 indexOf 的结果，决定当前元素是否应该包含在新数组中。
封装局部变量
- ```
var _inputText = this.inputText
```
- 在 filter 的回调函数中直接使用 this.inputText，那么 this 将不会指向 Vue 实例，从而导致错误。
- 通过将 this.inputText 的值赋给一个局部变量，可以确保在回调函数中正确地使用它。

<body>
<div id="app">
    <h2>过滤案例</h2>
    <label>输入框：
        <input @input="inputFunc" type="text" v-model="inputText">
    </label>
    <hr>
    <h2>信息列表</h2>
    <ul>
        <li v-for="(item,index) in newInfoArray" :key='index'>第【{{index + 1}}】条数据>>:{{item}}</li>
    </ul>

</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            inputText: "",
            infoArray: ["a", "ae", "eo", "aei", "ei", "aeiou"],
            newInfoArray: ["a", "ae", "eo", "aei", "ei", "aeiou"]
        },
        methods: {
            inputFunc() {
                // 函数又嵌套了一层，不能直接使用inputText
                var _inputText = this.inputText
                this.newInfoArray = this.infoArray.filter(function (item) {
                    if (item.indexOf(_inputText) >= 0) {
                        return true
                    } else {
                        return false
                    }
                })
            }
        }
    })
</script>

稍微优化一下：优化条件表达式

inputFunc() {
    var _inputText = this.inputText
    this.newInfoArray = this.infoArray.filter(function (item) {
        return (item.indexOf(_inputText)) >= 0
    })
}

再次优化：使用箭头函数

inputFunc() {
    this.newInfoArray = this.infoArray.filter((item) => item.indexOf(this.inputText) >= 0)
}

在飞行-米龙

关注

21
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
vue 基础语法-下篇

双向数据绑定意味着，当表单元素的值发生变化时，Vue 实例中的数据也会自动更新；反之，当 Vue 实例中的数据发生变化时，表单元素的值也会相应地更新。是一个绑定，它提供了一个唯一的标识符给每个节点，这对于 Vue 的虚拟 DOM 算法来说是必要的，以便能够高效地更新和重新排序节点。如：输入123，确认以后，在删除23，在输入23是不会触发change事件的。的表达式，如果为真，则渲染该元素或组件。：当表达式的值为真时，渲染该元素或组件。的回调函数，它接受数组中的一个元素。的表达式为假时，会评估这个。
复制链接

扫一扫

专栏目录