js之 data-*自定义属性】的更多相关文章

<div id="div1" a="a" data-bbb="bbb">div</div> <script> var oDiv=document.getElementById('div1'); oDiv.b='b'; alert(oDiv.a); //undefined:因为HTML中的自定义属性不能直接获取 alert(oDiv.b); //b:通过JS添加的自定义属性能直接获取 alert(oDiv.get…
js基础的自定义属性练习: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> li { list-style:none; width:114px; height:140px; flo…
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备注 prop 1 beforeCreated, created之间 对象或数组 接收父组件传递的值 data 3 同↑ 对象或函数 定义以及初始化数据 最好是用于视图上展示的数据,否则最好定义在外面或者vm对象内(减少开支,提高性能):组件内只接受函数 computed 4 同↑ 函数 提供相对简单…
最近学习Vue.js发现其为了实现对data内的数组和对象进行双向绑定,将数组和对象进行了封装. 如下的对象 todos: [     {         id: 1,         title: 'Do the dishes',     },     {         id: 2,         title: 'Take out the trash',     },     {         id: 3,         title: 'Mow the lawn'     } ] 会被…
<!--原生获取方法--> <div data-id="id=1"></div> <script> //js原生获取方法 var id = this.getAttribute('data-id'); var id = this.dataset.id //jquery方法获取 var id = $(this).attr('data-di') var id = $(this).data('id') </script>…
重点:1.添加索引值的作用:建立匹配.对应的关系. 比如:使每一个按钮对应数组里的每一张图,arrImg[this.index]. 2.不要在for循环的函数里面使用i. 3.添加索引值的方法aBtn[i].index=i;//索引值 给每一个li添加了自定义属性index为i,它的作用是一旦和其他数组相匹配,就可以找到相应数组里的东西 代码示例: for(var i=0;i<aLi.length;i++){  aLi[i].index=i; //索引值 给每一个li添加了自定义属性index为…
<input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: document.getElementById("txtBox").getAttribute("displayName");   document.getElementById("txtInput").attributes["displa…
假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5> <script> methods: { getDataId() { console.log(this.data-id); }…
data data 是Vue实例的数据对象.Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体的介绍).对象必须是纯粹的对象(含有零个或多个的key/value对).因为这里面的数据都是被监控的,所以说这里面的数据最好都是在视图层显示的数据.如果说不是在视图层展示的变量.可以定义在外面或者放在vm对象上. eg: let baz = '' export default { data() {…
简单对象List自定义属性排序 <script type="text/javascript"> var objectList = new Array(); function Persion(name,age){ this.name=name; this.age=age; } objectList.push(new Persion('jack',20)); objectList.push(new Persion('tony',25)); objectList.push(new…