js list删除指定元素_vue.js
2024-06-07 13:55:25
vue.js 中M V MV代表哪一部分
<插值表达式（v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show ）
<body><div id="app"><!-- 使用 v-cloak 能够解决 插值表达式闪烁（在网络不好的情况下{{ msg }}展示出来）的问题 不会覆盖元素中原本的内容--><p v-cloak>++++++++ {{ msg }} ----------</p><!-- 默认 v-text 是没有闪烁问题的--><!-- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把整个元素的内容清空 --><h4 v-text="msg">==================</h4><div>{{msg2}}</div><!-- v-html会覆盖元素中原本的内容 解析标签 --><div v-html="msg2">1212112</div><!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 --><!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定 --><!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 --><!-- v-bind 中，可以写合法的JS表达式 --><!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> --><!-- Vue 中提供了 v-on: 事件绑定机制 --><!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> --><!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 --><!-- 注意： v-model 只能运用在 表单元素中 --><!-- input(radio, text, address, email....) select checkbox textarea --><input type="text" style="width:100%;" v-model="msg"><!-- v-if 的特点：每次都会重新删除或创建元素 --><!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --><!-- v-if 有较高的切换性能消耗 --><!-- v-show 有较高的初始渲染消耗 --><!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show --><!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --><h3 v-if="flag">这是用v-if控制的元素</h3><h3 v-show="flag">这是用v-show控制的元素</h3></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {msg: '123',msg2: '<h1>哈哈我骄傲</h1>',mytitle: '这是一个自己定义的title'},methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法show: function () {alert('Hello')}}})</script>
</body>v-for
<body><div id="app"><!-- i索引值--><p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p><p v-for="(user, i) in list2">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p><!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 --><p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p> <!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 --><!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --><p v-for="count in 10">这是第 {{ count }} 次循环</p> </div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {list: [1, 2, 3, 4, 5, 6],list2: [{ id: 1, name: 'zs1' },{ id: 2, name: 'zs2' },{ id: 3, name: 'zs3' },{ id: 4, name: 'zs4' }],user: {id: 1,name: '托尼·屎大颗',gender: '男'}},methods: {}});</script>
</body>
v-for循环中key属性的使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="app"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string --><!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --><!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 --><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: '李斯' },{ id: 2, name: '嬴政' },{ id: 3, name: '赵高' },{ id: 4, name: '韩非' },{ id: 5, name: '荀子' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});</script>
</body></html>事件修饰符 ： .stop .prevent .capture .self .once
<div id="app"><!-- 使用 .stop 阻止冒泡 --><!-- <div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler"></div> --><!-- 使用 .prevent 阻止默认行为 --><!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> --><!-- 使用 .capture 实现捕获触发事件的机制 --><!-- <div class="inner" @click.capture="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div> --><!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 --><!-- <div class="inner" @click="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div> --><!-- 使用 .once 只触发一次事件处理函数 --><!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> --><!-- 演示： .stop 和 .self 的区别 --><!-- <div class="outer" @click="div2Handler"><div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler"></div></div> --><!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 --><!-- <div class="outer" @click="div2Handler"><div class="inner" @click.self="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div></div> --></div>vue.js中的样式 class 样式 style 样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.red {color: red;}.thin {font-weight: 200;}.italic {font-style: italic;}.active {letter-spacing: 0.5em;}</style>
</head><body><div id="app"><!-- <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1> --><!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 --><!-- <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> --><!-- 在数组中使用三元表达式 --><!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> --><!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 --><!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> --><!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符 --><h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: true,classObj: { red: true, thin: true, italic: false, active: false }},methods: {}});</script><div id="app2"><!-- 对象就是无序键值对的集合 --><!-- <h1 :style="styleObj1">这是一个h1</h1> --><h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app2',data: {styleObj1: { color: 'red', 'font-weight': 200 },styleObj2: { 'font-style': 'italic' }},methods: {}});</script>
</body></html>js list删除指定元素_vue.js相关推荐
- vue.js 删除指定元素_vue.js删除动态绑定的radio的指定项
上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: " " + "{{option.text}}&q ...
- js 数组删除指定元素
js 数组删除指定元素,js 数组并没有提供直接删除某一指定元素的方法,因此需要我们稍作处理 思路:首先找到要删除的元素的位置,然后使用 splice 方法进行删除 示例代码 删除数组 s 中的 ' ...
- js list删除指定元素_删除js数组中的指定元素，有这两步就够了
js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单. 1.JS的数组对 ...
- js数组删除指定元素
js删除指定元素方法有很多,下面给出一个最简单的 给数组添加个remove方法: Array.prototype.remove = function(val) {var index = this.in ...
- js array 删除指定元素_数组--学习笔记（数据结构数组 /js数组）
学习目标: 了解什么是数组: 数组如何访问内存地址(一维,二维): 什么是数组 是由相同类型的元素的集合所组成的数据结构,分配一块连续的内存来存储.利用元素的索引可以计算出该元素对应的存储地址. 最简 ...
- js array 删除指定元素_Array 原型方法源码实现解密
作者:木易杨 引言 今天这篇文章主要看看 ECMA-262 规范中是如何定义这些方法的,并且在看完规范后我们用 JS 模拟实现下,透过源码探索一些底层的知识,希望本文对你有所帮助. Array.pro ...
- js array 删除指定元素_JS数组
JS其实没有真正的数组,只是用对象模拟数组 创建一个数组 Array.from可以将不是数组的尝试变成数组 只会在符合条件下才能转化成功:该对象有0,1,2,3这种下标和length属性 伪数组:如果 ...
- js数组怎么删除指定元素？
js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单. 1.JS的数组对 ...
- html数组删除指定元素,JS实现数组删除指定元素功能示例
本文实例讲述了JS实现数组删除指定元素功能.分享给大家供大家参考,具体如下: www.jb51.net JS数组删除指定元素 var array = ["111", "2 ...
最新文章
- 东北大学 | 一种适用于大规模公路环境的鲁棒激光惯性里程计和建图系统
- 我是一个秒杀请求，正在逃离这颗星球...
- 【解题报告】【HDOJ1392】【Graham凸包】Surround the Trees
- [Erlang 0004] Centos 源代码编译 安装 Erlang
- MSE和Cross-entropy梯度更新比较
- php用不了for循环吗,php中的这两个for循环有什么区别吗？
- pandas分组计算平均值_pandas索引,分组计算
- oralce 11g rac ocr和votedisk迁移
- python标准库的图像处理模块_PIL：Python Imaging Library(图像处理标准库)
- 15款Cocos2d-x游戏源码
- 【Ionic】---Using Local Notifications In Your Ionic Framework App
- linux读取bmp图片数据,linux下读取bmp图片文件头
- 微信支付的分账功能介绍
- 软件企业双软认证的条件和好处是什么
- 浅探 进程的家族关系
- 在 Python 中的常见的几种字符串替换操作
- unity查找物体方法
- 【Java】垃圾回收
- 零基础学习Python3——Python 安装
- 博弈论分析题_微观经原笔记（四）一些关于博弈论的习题
热门文章
- VLC详细的使用说明以及配置说明综合示范实例精通VLC开发
- 如何保证代码的高质量？
- 创业必经之路——Paul Graham创业曲线
- h.264视频文件封装
- 算术编码（Arithmetic Coding）源代码
- 解决 : Shell 脚本 $‘\r‘: command not found 问题
- 解决 VUE：[WDS] Errors while compiling. Reload prevented...- invalid expression: Unexpected token -- in
- 简单明了 - Git 使用超详细教程
- java 对 redis 的基本操作
- Django：学习笔记(2)——创建第一个应用