vue的ref试用
2024-09-23 04:01:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<p ref="good">不要啦</p>
<button @click="add()">添加</button>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
add:function () {
console.log(this.$refs.good,)
this.$refs.good.style.color="red"
}
},
created:function(){
// this.getGood()
}
}) </script>
</html>
要注意的是:
因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs
也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
一个方法,直接在created里面调,是不可以的,出现的是undefined.
最新文章
- mysql管理(一)
- GCD工作单元
- 在openSUSE13.2上gem install rails -v 4.1成功,但是之后不存在rails命令解决
- boost.asio源码剖析
- 在项目中 background transiton 带来的";便利";与“坑”
- Centos安装编译环境
- java接收数据接口
- MacTex XeLaTex xdvipdfmx:fatal: pdf_ref_obj(): passed invalid object. 报错的解决方法
- windows平台python 2.7环境编译安装zbar
- c++ string去除首尾 空格、\n、\r、\t
- 基于Hadoop2.7.3集群数据仓库Hive1.2.2的部署及使用
- GuidePage底部导航栏
- Linux下Mysql自启动
- Struts2学习:Action获取properties文件的值
- 让span对宽度有响应而且兼容多种浏览器
- 记录Kali Linux 安装输入法过程
- 【bzoj2693】jzptab 莫比乌斯反演+线性筛
- Cloudera Manager安装之Cloudera Manager安装前准备(CentOS6.5)(一)
- Javascript装饰器的妙用
- 4.iptables 网络防火墙
热门文章
- 智表(ZCELL)插件产品选型说明书,市场主流插件对比,帮您选型
- PHP写的简单数字验证码
- SQL----EXISTS 关键字
- 七年开发经验教你如何正确、安全地停止 SpringBoot 应用
- php error_log记录日志的使用方法--拿来即用,超简单
- GCC 编译流程简介
- 阿里巴巴开源性能监控神器Arthas jvm
- 【转】使用JavaParser获得Java代码中的类名、方法形参列表中的参数名以及统计总的文件个数与不能解析的文件个数
- 基于Java+Selenium的WebUI自动化测试框架(十)-----读取Excel文件(JXL)
- 兼容火狐,Chrome,IE6,IE7,IE8的HTML换行写法