精华内容
下载资源
问答
  • 获取自定义属性的方法:第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = "item.id"属性第三步:在里面的属性methods里面添写上事件函数 ...

    获取自定义属性的方法:

    第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面

    第二步:在标签上继续绑定:date-id = "item.id"属性

    第三步:在

    methods: {

    getDataId(id) {

    console.log(id);

    }

    },

    补充知识:vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title

    一、本地存储:

    localStorage.setItem('uqid','REgaI2eAT9yDfpdc'); //存储本地(传死参)

    var uqid = localStorage.getItem('uqid'); // 获取存储本地值

    或者

    var orderSn = 20;

    localStorage.setItem('orderSn',orderSn);

    var uqid = localStorage.getItem('orderSn');

    二、获取自定义--------data-id

    bindList(e){

    var autoId = $(e.currentTarget).attr('data-id'); //获取div -data

    },

    三、获取链接---url参数

    http://localhost:8080/#/lineitem?uqid =2019032817530157997 (获取---uqid )

    bindList(){

    var uqid = utils.getUrlKey('uqid');

    alert(uqid );

    },

    以上获取url参数需要引入js文件----utils.js

    /* eslint-disable */

    export default{

    getUrlKey: function (name) {

    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null

    }

    }

    main.js全局引入下

    import utils from './assets/js/utils.js' //获取url参数

    global.utils = utils;

    四、页面跳转返回

    @click="bindReturn"

    methods:{

    bindReturn(){

    this.$router.go(-1); //返回上一页,

    },

    bindOrider(){

    this.$router.push({path: '/doctorlist'}); //页面跳转

    },

    }

    router/index.js文件中

    import doctorList from '@/components/doctorlist'

    export default new Router({

    routes: [

    {

    path:'/doctorlist',

    name:'doctorList ',

    component:doctorList ,

    meta: {

    title: '我是修改后的页面title'

    }

    },

    ]

    })

    修改页面title--main.js 最后添加

    // 修改页面title

    router.beforeEach((to, from, next) => {

    /* 路由发生变化修改页面title */

    if (to.meta.title) {

    document.title = to.meta.title;

    }

    next();

    })

    以上这篇在Vue中获取自定义属性方法:data-id的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持随便开发网。

    展开全文
  • 1. 动态绑定内容 动态绑定内容可以通过 Mustache,v-text指令,v-html指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    官方文档参考

    1. 动态绑定 内容

    动态绑定内容可以通过 Mustache,v-text指令v-html指令

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
      <div id="app"></div>
    
    
      <!-- 模板写法一 -->
      <!-- <script type="x-tempalte" id="my-app">
        <h2>{{ message }}</h2>
        <h2 v-text="message"></h2>
        <div v-html="info"></div>
      </script> -->
    
      <!-- 模板写法二 template会被浏览器忽略 -->
      <template id="my-app">
        <h2>{{ message }}</h2>
        <!-- 
          {{ message }} 相当于 v-text写法。
          data属性中message内容发生变化,页面展示的值也会动态调整 
        -->
        <h2 v-text="message"></h2>
        <div v-html="info"></div>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: `#my-app`,
          data() {
            return {
              message: "hello vue3",
              info: `<span style="color: red;font-weight: 900;font-size: 30px;" > 嘿嘿嘿</span >`
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    </html>
    


    2. v-bind指令动态绑定 属性

    v-bind指令是开发中最常用的指令之一,而且非常强大,可以用来动态绑定 属性classstyle对象

    <body>
      <div id="app"></div>
    
      <template id="my-app">
        <!-- v-bind完整写法 -->
        <img v-bind:src="src" alt="动漫图片">
    
        <!-- 语法糖写法(使用: 简洁方便,最常用) -->
        <img :src="src" alt="动漫图片">
    
        <!-- 注意不要写丢了,找半天找不到 -->
        <img src="src" alt="动漫图片未写v-bind">
    
        <a :href="href">我是一个跳转到百度的链接</a>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: "#my-app",
          data() {
            return {
              src: "https://tse3-mm.cn.bing.net/th/id/OIP.TIxW7fKu-vTbnQ2F6bIjGwHaNK?pid=ImgDet&rs=1",
              href:"https://www.baidu.com"
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    

    绑定 自定义属性

    <body>
      <div id="app"></div>
    
      <template id="my-app">
        <div :[key]="value">{{ message }}</div>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: "#my-app",
          data() {
            return {
              message: "hello VUE3",
              key: "abc",
              value: "def"
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    

    在这里插入图片描述



    3. v-bind指令动态绑定 class

    v-bind指令动态绑定 class,有两种写法。分别是:对象语法数组语法;

    <!-- v-bind绑定class对象语法 -->
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .active {
          color: orangered;
          font-weight: 900;
        }
      </style>
    </head>
    
    <body>
      <div id="app"></div>
    
      <template id="my-app">
        <!-- 1. 普通的绑定方式 -->
        <div :class="className">{{ message }}</div>
    
        <!-- 2. 对象方式动态切换class是否加入: {active: (boolean true/false)} -->
        <div class="home" :class="{abc:true, 'james' : true}">hello VUE3</div>
    
        <!-- 3. 切换显示隐藏 -->
        <div :class="{'active': isActive}">哈哈哈</div>
        <button @click="toggle">切换</button>
    
        <!-- 4. 绑定对象 -->
        <div :class="classObj">哈哈哈</div>
    
        <!-- 5. 从methods中获取 -->
        <div :class="getClassObj()">哈哈哈</div>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: "#my-app",
          data() {
            return {
              message: "hello VUE3",
              className: "active",
              isActive: true,
              classObj: { 'active': true, 'abc': true }
            }
          },
          methods: {
            toggle() {
              this.isActive = !this.isActive
            },
            getClassObj() {
              return { 'active': this.isActive, 'title': this.isActive }
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    <!-- v-bind绑定class数组语法 -->
    <body>
      <div id="app"></div>
    
      <template id="my-app">
        <!-- 1. 直接传入一个数组 -->
        <div :class="['who','title']">哈哈哈</div>
    
        <!-- 2. 数组中使用三元运算符  [变量?类名true:类名false]-->
        <div :class="[isActive ? 'active': '']">呵呵呵</div>
    
        <!-- 3. 数组中使用对象语法 -->
        <div :class="['abc',{'active':isActive}]">嘿嘿嘿</div>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: "#my-app",
          data() {
            return {
              isActive: true,
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    

    在这里插入图片描述



    4. v-bind指令动态绑定 style

    v-bind指令动态绑定 style 同样的有两种写法。分别是:对象语法数组语法;

    <!-- v-bind 绑定style 对象语法 -->
    <body>
      <div id="app"></div>
    
      <template id="my-app">
        <!-- 1. 绑定一个对象 -->
        <div :style="styleObj">{{ message }}</div>
    
        <!-- 2.style绑定对象使用三元表达式  -->
        <div :style="{color: title.includes('测试')?greenColor:blueColor}">{{ message }}</div>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: "#my-app",
          data() {
            return {
              message: "hello VUE3",
              styleObj: {
                fontSize: '30px',
                fontWeight: '900',
                'font-family': '宋体',
                color: 'orangered',
              },
              title: '测试',
              greenColor: 'green',
              blueColor: 'blue'
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    
    <!-- v-bind 绑定style 数组语法 -->
    <body>
      <div id="app"></div>
    
      <template id="my-app">
        <div :style="[styleObj1,styleObj2]">{{ message }}</div>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: "#my-app",
          data() {
            return {
              message: "hello VUE3",
              styleObj1: {
                fontSize: '30px',
                fontWeight: '900',
                'font-family': '宋体',
                color: 'orangered',
              },
              styleObj2: {
                backgroundColor: 'green'
              }
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    

    在这里插入图片描述
    在这里插入图片描述



    5. v-bind 绑定一个 对象

    如果我们希望将一个对象的所有属性,绑定到元素上,可以直接绑定一个对象;可以直接使用v-bind,也可以使用简写 :",但是直接绑定一个对象时,更推荐使用v-bind,便于阅读维护

    <!-- v-bind 绑定一个对象 -->
    <body>
      <div id="app"></div>
    
      <template id="my-app">
        <div v-bind="info">{{ message }}</div>
    
        <!-- 不推荐,不便于阅读 -->
        <div :="info">{{ message }}</div>
      </template>
    
      <script src="https://unpkg.com/vue@next"></script>
      <script>
        const App = {
          template: "#my-app",
          data() {
            return {
              message: "hello VUE3",
              info: {
                name: "zk",
                age: 23,
                height: 175
              }
            }
          },
        };
        Vue.createApp(App).mount("#app");
      </script>
    </body>
    

    在这里插入图片描述

    展开全文
  • 偶尔还是会陷入到dom... },2000) } } } 以上所述是小编给大家介绍的vue如何获取自定义元素属性参数值的方法详解整合,希望对大家有所帮助 如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

    偶尔还是会陷入到dom操作上面去,其实你应该关心的是数据传递,而不是操作dom。如果你是想获取data-num的数据,可以这样写:

    55

    getdata:function (e,num) {

    console.log(num)

    }

    这样就可以取到这个值了,如果你是确实想操作dom,那你可以这样写:

    55

    getdata:function (e) {

    console.log(this.$refs.datanum.dataset.num);

    }

    f4d9e8c06e29a291beaadab1da16b582.png

    2.通过e.target.getattribute

    55

    new vue({

    el:'#app',

    methods:{

    getdata:function (e) {

    console.log(e.target.getattribute('data-num'))

    }

    }

    })

    3.自定义命名

    如:html

    js:

    $('.live-dd').on("click",function(){var num = this.getattribute('numid');location.href='/live/info?id='+num;})

    使用jq的方法

    var live_id = $('.vk_cq5').attr('classid')

    ref的用法  相当于操作dom

    html :

    demo

    js:

    export default {

    data () {

    return {

    }

    },

    mounted () {

    this.init();

    },

    methods:{

    init() {

    const self = this;

    this.$refs.mybox.style.color = 'red';

    settimeout(() => {

    self.$refs.mybox.style.color = 'blue';

    },2000)

    }

    }

    }

    以上所述是小编给大家介绍的vue如何获取自定义元素属性参数值的方法详解整合,希望对大家有所帮助

    如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

    展开全文
  • Vue自定义属性

    2021-07-30 14:05:30
    一、定义语法: (1).局部指令: newVue({ directives:{指令名:配置对象} }) 或者 newVue( ...

          一、定义语法:

                            (1).局部指令:

                                new Vue({

                                    directives:{ 指令名:配置对象 } 

                                })

                                或者

                                new Vue(    

                                    directives{ 指令名:回调函数 }

                                })

                            (2).全局指令:

                                Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

                        二、配置对象中常用的3个回调:

                            (1).bind:指令与元素成功绑定时调用。

                            (2).inserted:指令所在元素被插入页面时调用。

                            (3).update:指令所在模板结构被重新解析时调用。

                        三、备注:

                            1.指令定义时不加v-,但使用时要加v-;

                            2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

    下面通过一个例子来演示

                    需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。

                    需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>自定义指令</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>当前的n值是:<span v-text="n"></span> </h2>
                <!--  指令如果是多个单词 用-横线分隔 -->
    			<!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span> </h2> -->
    			<h2>放大10倍后的n值是:<span v-big="n"></span> </h2>
    			<button @click="n++">点我n+1</button>
    			<hr/>
    			<input type="text" v-fbind:value="n">
    		</div>
    	</body>
    	
    	<script type="text/javascript">
    		Vue.config.productionTip = false
    
    		//定义全局指令
    		/* Vue.directive('fbind',{
    			//指令与元素成功绑定时(一上来)
    			bind(element,binding){
    				element.value = binding.value
    			},
    			//指令所在元素被插入页面时
    			inserted(element,binding){
    				element.focus()
    			},
    			//指令所在的模板被重新解析时
    			update(element,binding){
    				element.value = binding.value
    			}
    		}) */
    
    		new Vue({
    			el:'#root',
    			data:{
    				n:1
    			},
    			directives:{
    				//big函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。
                    // 指令如果是多个单词 用-横线分隔
    				/* 'big-number'(element,binding){
    					// console.log('big')
    					element.innerText = binding.value * 10
    				}, */
    				big(element,binding){
    					console.log('big',this) //注意此处的this是window
    					// console.log('big')
    					element.innerText = binding.value * 10
    				},
    				fbind:{
    					//指令与元素成功绑定时(一上来)
    					bind(element,binding){
    						element.value = binding.value
    					},
    					//指令所在元素被插入页面时
    					inserted(element,binding){
    						element.focus()
    					},
    					//指令所在的模板被重新解析时
    					update(element,binding){
    						element.value = binding.value
    					}
    				}
    			}
    		})
    		
    	</script>
    </html>

    展开全文
  • Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。...然后在入口文件进行 Vue.use()调用。批量...
  • 一、定义属性:一般定义属性都是为了动态的去获取属性的值...下面具体说动态绑定自定义属性:在元素标签上通过v-bind:propName = ‘valueInData’ 解释:propName 是自己指定的属性名,valueInData是定义在Vue实例的...
  • 1、v-bind指令的介绍和基本使用 ...而很多时候我们的属性值也是需要变化的,比如src可能是从服务器请求过来的,把值放到vue实例的data,然后将data属性赋到模板属性里面,我们只需要修改data的值就可以实时
  • 这篇文章主要为大家详细介绍了vue.js 获取当前自定义属性值,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!假设有一个标签h5, 我们给它添加了一个自定义属性值...
  • 二、 怎么做“:”为v-bind的简写形式,也可称为语法糖三、 效果四、 深入在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定。不只是a标签,所有...
  • Vue 获取自定义属性的值

    千次阅读 2021-03-07 07:24:35
    在jquery,如果要获取 data-***的值可以通过$('目标元素').data('属性名')来获取。在Vue中如何获取该值呢?1.换个思路,作为参数传递。如下代码:say himethods: {say(message){console.log(message)}}2.通过e....
  • 我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面获取 标签的写法 <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1"> &...
  • 抛出踩坑:vue创建后的数据,自定义设置对象的属性,实现不了双向绑定当业务场景,需要在请求接口数据...1234我们要做数量增加时候,后自定义添加数量属性quantity:// 添加自定义属性数量quantityfoodList.forEa...
  • 子组件改变父组件的值在Vue中是不提倡的,或者说是不允许的,因此我们如果想改变父组件的值,那么我们必须使用this.$emit("eventHandler",要传的值),然后再父组件进行监听eventHandler事件然后绑定
  • Vue属性绑定~非常详细

    2021-01-21 23:43:29
    Vue如何动态处理属性 v-bind指令用法 <a v-bind : href='url'>跳转</ a> 缩写形式 <a : href="ur1">跳转</ a> 示例: <!DOCTYPE html> <html lang="en"> <head> ...
  • 我们在vue中用的click、keyup……等事件,这些属于内置事件,也就是js自带的事件。 问题一:什么是组件自定义事件呢? 自定义事件,顾名思义就是自己打造的事件,包含事件名,事件回调等,定义好之后去给组件使用...
  • 2. 父组件使用v-model绑定,子组件props接收参数,参数名称可以自定义,$emit触发方法传值,方法名称可以 自定义,通过model属性将prop参数名和事件名进行关联 3. 父组件使用:name.sync绑定,子组件props接收参数...
  • 由于该UI组件的事件都是用v-bind(:)绑定的,所以传入自定义参数需要用到函数返回函数的形式 <AtInputNumber :width="200" :min="0" :max="10" :step="1" :value="value" :onChange="handle1" ></...
  • 全局指令使用 Vue 对象下的 directive 方法定义,局部指令在 Vue 实例设置 directives 属性。 如下代码所示: // 注册为全局指令 Vue.directive('focus', { inserted: function (el) { // 获取焦点事件 el....
  • Vue3中自定义双向绑定

    2021-04-19 17:47:32
    vue2父组件通过v-model绑定,子组件默认接收一个value属性 vue3需要通过v-model指定一个需要绑定属性名称 <!-- 通过:后面指定子组件接收的props名称 --> <AddBook v-model:dialogVisible=...
  • 什么是css自定义属性 官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性. CSS变量和预处理器的变量有什么不同? CSS变量是浏览器直接可用的CSS属性,而...
  • ' : null 详细说明和用法,可参考这篇文章侯锋:通过 JSX Control Statements 编写 JSX​zhuanlan.zhihu.com 再进一步,在 React 也是可以进行「双向绑定」的,比如结合 Mota,Mota 是一个主张「面向对象」的、...
  • vue中标签的属性绑定值渲染问题

    千次阅读 2021-01-11 16:24:15
    最终解决办法:在绑定的title使用过滤器,去掉内容的标签(本项目情况特殊,返回标签固定,所以替换标签比较方便),如果大家还有其他解决办法欢迎留言~~ //template部分--使用的elementUI <span class=...
  • vue2父组件通过v-model绑定,子组件默认接收一个value属性 vue3需要通过v-model指定一个需要绑定属性名称 // 通过:后面指定子组件接收的props名称 <modal v-model:visible="modalVisible"></...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,385
精华内容 14,154
关键字:

vue中动态绑定自定义属性

vue 订阅