精华内容
下载资源
问答
  • vue事件给元素添加属性
    千次阅读
    2022-03-15 23:00:28
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>Vue监测数据改变的原理</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h1>学校信息</h1>
    			<h2>学校名称:{{school.name}}</h2>
    			<h2>学校地址:{{school.address}}</h2>
    			<h2>校长是:{{school.leader}}</h2>
    			<hr/>
    			<h1>学生信息</h1>
    			<button @click="addSex">添加一个性别属性,默认值是男</button>
    			<h2>姓名:{{student.name}}</h2>
    			<h2 v-if="student.sex">性别:{{student.sex}}</h2>
    			<h2>年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
    			<h2>朋友们</h2>
    			<ul>
    				<li v-for="(f,index) in student.friends" :key="index">
    					{{f.name}}--{{f.age}}
    				</li>
    			</ul>
    		</div>
    	</body>
    
    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				school:{
    					name:'尚硅谷',
    					address:'北京',
    				},
    				student:{
    					name:'tom',
    					age:{
    						rAge:40,
    						sAge:29,
    					},
    					friends:[
    						{name:'jerry',age:35},
    						{name:'tony',age:36}
    					]
    				}
    			},
    			methods: {
    				addSex(){
    					// Vue.set(this.student,'sex','男')
    					this.$set(this.student,'sex','男')
    				}
    			}
    		})
    	</script>
    </html>

    更多相关内容
  • 下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的,现在就分享大家,也大家做个参考。一起跟随小编过来看看吧
  • 背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集...1) 通过post调用接口获取minData对象,遍历添加属性value和content(方便后续通过v-model设置绑定radio控件
  • 下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 当我们一个比如props中,或者data中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用Vue.set方法 Vue.set方法用来新增对象的属性。如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是...
  • 我的代码结构如下所示不能执行,会出现报错 <Radio v-for='a in radio_arr' label={{a}}></Radio> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' ...
  • vue中有时候可能想像使用jq一样某个元素添加属性,如 $('#select1').attr('disabled','disabled') 这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样: <...
  • vuejs v-bind给元素添加属性

    千次阅读 2020-11-25 13:05:48
    -- 自动添加前缀: 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时,如 transform,Vue.js 会自动侦测并添加相应的前缀。 --- 多重值: 从 2.3.0 起你可以为 style 绑定中的 property 提供一个...

    一、动态绑定一个或多个常见属性(css属性),例如class,style等

    <!-- 绑定一个 attribute -->            <img v-bind:src="imageSrc">

    <!-- 动态 attribute 名 (2.6.0+) -->          <button v-bind:[key]="value"></button>

    <!-- 内联字符串拼接 -->        <img :src="'/path/to/images/' + fileName">

    <!-- 通过 prop 修饰符绑定 DOM attribute -->        <div v-bind:text-content.prop="text"></div>

    修饰符

    • .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
    • .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
    • .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。

     

    下面具体来看:

     

    1、通过HTML class 绑定

    --- 对象语法:

    传给v-bind:class 一个对象,以动态地切换 class:

    <div v-bind:class="{ active: isActive }"></div>

     active是class类名,isActive为布尔值;

     

    更多字段来动态切换多个 class,如:

    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

    v-bind:class 指令也可以与普通的 class attribute 共存。

    data中的isActive、hasError对象:

    data: {
      isActive:true,
      hasError: true
    }

    结果渲染为:

     

    绑定的数据对象不必内联定义在模板里,可直接定义一个对象,如:

    <div v-bind:class="classObject"></div>
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }

     

    也可以在这里绑定一个返回对象的计算属性,如:

    <div v-bind:class="classObject"></div>
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }

     

    --- 数组语法:

    把一个数组传给 v-bind:class,以应用一个 class 列表,如:

    <div v-bind:class="[activeClass, errorClass]"></div>
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }

    渲染为:

     

    根据条件切换列表中的 class,可以用三元表达式,如:

    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

      isActive为true时显示activeClass类,为false时显示errorClass类。

     

    当有多个条件 class 时,在数组语法中也可以使用对象语法,如:

    <div v-bind:class="[{ active: isActive }, errorClass]"></div>
    data: {
      isActive: true,
      errorClass: 'text-danger'
    }

     

    --- 用在组件上:

    在一个自定义组件上使用 class property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

    例如,如果你声明了这个组件:

    Vue.component('my-component', {
      template: '<p class="foo bar">Hi</p>'
    })

    然后在使用它的时候添加一些 class:

    <my-component class="baz boo"></my-component>

    HTML 将被渲染为:

     

     

    对于带数据绑定 class 也同样适用,如:

    <my-component v-bind:class="{ active: isActive }"></my-component>

    当 isActive 为 true 时,HTML 将被渲染成为:

     

     

    2、绑定内联样式

    --- 对象语法:

    v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象

    如:

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

    activeColor、fontSize 是一个对象:

    data: {
      activeColor: 'red',
      fontSize: 30
    }

     

    直接绑定一个对象,如:

    <div v-bind:style="styleObject"></div>

    data中的styleObject对象:

    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }

     

    --- 数组语法:

    v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

    如:

    <div v-bind:style="[baseStyles, overridingStyles]"></div>
    data:{
        baseStyles:{
          backgroundColor:'green',
            color:'#ffffff'
          },
          overridingStyles:{
            borderRadius:'20px',
            'font-weight': 'bold'
          },
    }

     

    --- 自动添加前缀:

    当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

     

    --- 多重值:

    从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

    这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex

    谷歌显示:

     

     

     

     

    展开全文
  • :id绑定 :id=”‘a_’+index” ...然后在vue的实例中就可以拿到对应的id b(index){ this.list.splice(index,1); } 或 ”open($event)” id=”1″>添加 open(a){ console.log(a.currentTarge
  • vue.set如何添加属性

    2021-06-13 17:55:55
    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。根据官方文档定义:如果在...

    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

    5e5663f59b044727.jpg

    根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

    受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

    看以下实例:

    {{obj.d}}

    {{obj.e}}

    export default {

    data(){

    return {

    obj:{}

    }

    },

    mounted() {

    this.obj = {d: 0};

    this.obj.e = 0;

    console.log('after--', this.obj);

    },

    methods: {

    addd(item) {

    item.d = item.d + 1;

    console.log('item--',item);

    },

    adde(item) {

    item.e = item.e + 1;

    console.log('item--',item);

    }

    }

    }

    1581910087845868.png

    可以看出d属性是有get 和 set方法的,而新增的e属性是没有的。

    点击触发3次addd,点击触发3次adde,页面效果及控制台信息如下

    1581910104472895.png

    1581910127936800.png

    此时触发1次addd,页面效果如下:

    1581910136829791.png

    1581910159111774.png

    由此可以看出,更新新增属性e,是不会更新视图,但是会改变其值,当更新原有属性d时会更新视图,同时将新增的属性e的值也更新到视图里边

    解决方案

    官方定义:

    Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:Vue.set(vm.obj, 'e', 0)

    您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:this.$set(this.obj,'e',02)

    有时你想向已有对象上添加一些属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:// 代替 Object.assign(this.obj, { a: 1, e: 2 })

    this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })

    上述实例解决如下:

    1581910240469349.png

    点击触发3次addd,点击触发3次adde,页面效果及控制台信息如下:

    1581910252950006.png

    1581910269441062.png

    更多web前端开发知识,请查阅 HTML中文网 !!

    展开全文
  • 业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素...直接将svg文件的内容复制粘贴到.vue文件里,是可以在标签内直接添加@click事件完成需求的,方式简单但会造成文件过长,本文
  • vue中动态向对象中添加属性

    万次阅读 2021-12-14 00:29:46
    vue中动态向对象中添加属性 写项目时遇到一个问题 向后端发送post请求,需要新增数据时,向后端传递的参数形式是这样的: 关于这里面的nodes,后端接收的需要是键值对的形式: nodes里面的内容,左边是另一个数组...

    vue中动态向对象中添加属性

    写项目时遇到一个问题
    向后端发送post请求,需要新增数据时,向后端传递的参数形式是这样的:
    在这里插入图片描述
    关于这里面的nodes,后端接收的需要是键值对的形式:
    请添加图片描述
    nodes里面的内容,左边是另一个数组中每个元素的id,右边是该元素另一个属性的属性值。
    在这里插入图片描述
    如图所示,左边的值是图中array数组中的id的值,右边是对应的moneyNum的值,将这两个属性从这个数组中提取出来,然后添加到一个新的对象中,传给后端。
    代码:

    data() {
    	return {
    	    // 定义一下这个对象的结构
    		rewardPlan: {
                    1: 20
                }
    	}
    },
    methods: {
    	// 处理数据
            changeSendData() {
                var array = this.multipleSelection;
                console.log(array, 'array');
                // 遍历array数组
                for (let i = 0; i < array.length; i++) {
                    this.rewardPlan = { 1: 10 }; // 初始化rewardPlan对象
                    this.$nextTick(() => {
                        this.$set(this.rewardPlan, array[i].id, Number(array[i].moneyNum)); // 将moneyNum转换为Number类型
                    });
                }
                console.log(this.rewardPlan, 'rewardPlan');
            },
    }
    

    this.$set():

    当给对象添加了一个属性,在控制台能打印出来,但是却没有更新视图时,就可以用this.$set()
    官方解释:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发新视图更新。this.$set()必须用于向响应式对象上添加新属性,因为Vue无法探测普通的新增属性(比如:this.myObject.newProperty = ‘hello’)。
    this.$set(target, key, value)
    target: 要更改的数据源(可以使对象或者数组)
    key: 要更改的属性
    value: 赋给该属性的值

    可以拿到rewardPlan:
    在这里插入图片描述
    再给剩下的两个属性赋值:

                const param = {
                    name: this.ruleForm.planName,
                    nodes: this.rewardPlan,
                    recProId: this.processId
                };
                console.log(param, 'param');
    

    参数格式正确,请求发送成功
    在这里插入图片描述

    展开全文
  • vue对象添加属性

    千次阅读 2019-01-29 17:31:58
    Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上: Vue.set(vm.obj, 'e', 0) 您还可以...
  • 项目需求: 项目中需要判断当c_type ==...例:sendData是一个对象,sendData对象添加一个pinkId属性,值为有值的话就传,没有的话传空 this.$set(sendData,‘pinkId’,this.pinkId ? this.pinkId : ‘’) object.ass
  • Vuejs如何给元素添加自定义属性

    千次阅读 2019-11-02 15:33:02
    1.Vuejs如何给元素添加自定义属性
  • <ul @click ="clickfun($event)"> <li></li> </ul>...获取元素 ... e.currentTarget //是你绑定事件元素 //获得点击元素的前一个元素 e.currentTarget.previousElementSibling
  • VUE 怎么对象动态添加属性

    千次阅读 2020-10-19 15:11:59
    代码 <button @click="addObjB"></button> data:{ data:{ a:'' } } methods:{ addObjB(){ this.$set(this.data,'b...追加属性的两种方式 ... //添加一个属性 this.obj=Object.assign({},this.data,{a:1
  • 主要介绍了详解Vue改变数组中对象的属性不重新渲染View的解决方案,小编觉得挺不错的,现在分享大家,也大家做个参考。一起跟随小编过来看看吧
  • Vue给对象添加属性$set

    千次阅读 2021-04-06 15:29:51
    QQ音乐商业化-前端开发-第一轮视频初试-1h 1.项目介绍 ...(3)事件委托 (4)虚拟列表具体实现 (5)网络协议方向的优化->Http2.0 相比 http1.1, 新版本tcp连接可以并行处理,老版本是串行处理 ...
  • Vue中数据动态添加属性

    千次阅读 2020-04-05 20:34:29
    vue现有的对象动态的添加属性: 例如有数据 : data(){ return { userInfo:{age:99 } } } 如果在函数或者计算属性中为userInfo添加name属性, 我们可能会 this.userInfo['name'] = "hangzhou"; 这种方式添加...
  • vue实现加载并展示后台数据的tab选项卡 vue用于渲染页面 jquery用于方法实现动态效果 <!-- change方法, 数值改变触发 --> <select v-on:change=get...-- 为name属性添加当前索引值 --> <ul v-on
  • vue中动态绑定表单元素属性

    万次阅读 2016-12-27 14:38:46
    vue中有时候可能想像使用jq一样某个元素添加属性,如$('#select1').attr('disabled','disabled')这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样:...
  • vue获取DOM元素并设置属性

    千次阅读 2019-10-01 19:47:50
    这里我想到了2个方法: 方法一: 直接相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,相应的元素加ref=“...
  • 给vue中的元素设置css属性

    千次阅读 2020-09-05 09:29:06
    在script里面,修改css的属性,有两种方法: 1. 动态的设置class类名 <div :class="color"></div> method: { setColor() { this.color = colorRed; } } <style> colorRed { color:...
  • 这两天使用vue做东西遇到一些问题,今天总结记录一下:1. 在computed中没法操作dom元素,比如```computed: {w() {return this.$refs.box.offsetWidth}}```运行中报undefined错误,后来改成在mounted中获取this.$refs...
  • vue当前选中的元素添加类名

    千次阅读 2021-04-01 10:28:34
    假设页面上有一个菜单,点击选中一个选中样式,你会怎么做呢? html: <div class="demo-container"> <ul class="demo-ul" id="menu"> <li class="active"><a href="##">首页</a&...
  • 首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的, ...以上这篇vue 的点击事件获取当前点击的元素方法就是小编分享大家的全部内容了,希望能大家一个参考,也希望大家多多支持软件开发网。
  • Vue使用this.$set动态添加属性

    千次阅读 2022-04-07 16:03:07
    如果不是使用this.$set动态添加属性值,这个属性值是可以添加上,但是不会作为响应式数据,也就是不会重新解析模板。
  • 有时我们在页面渲染后再某一个数据对象添加或删除一个属性时,控制台显示已经添加但是实际的显示结果没有改变,这是因为在初始化的时候会对当前已有的对象属性调用getter和setter方法才会实现响应式,后面添加的不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,011
精华内容 25,204
热门标签
关键字:

vue事件给元素添加属性