jQuery如何操作用Vue.js template的元素,用vm.$refs.id--id是vue的ref指定的一个引用

目标:我想用jQuery操作vue模板中的元素;

示例html:

<div id="app">

 <div ref="mydiv">我是内容</div>

</div>

示例js:

var vm = new Vue({
    updated: function() { //这样保证vue的html渲染完成,就可以用ref对其操作了
        this.$nextTick(function() {
            // Code that will run only after the
            // entire view has been re-rendered
            $(vm.$refs.mydiv).text("我可以往div里放东西了,记得一定是要在updated这个状态里哦")
        })
    }
})

vue2文档原话:子组件引用

尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如:

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var vm = new Vue({ el: '#parent' })
// 访问子组件实例
var child = vm.$refs.profile

refv-for 一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。

$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值