个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
在 vue.js 的上下文中，getElementsByClassName 是如何工作的？
我有以下代码片段 - 目标是单击一个按钮并使用 vue.js 方法将 h1 标签的颜色更改为绿色:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 class="main-header">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
colorChange: function() {
// what do I do here...?
}
}
})
</script>
</body>
</html>
据我了解，Vue 就像带有虚拟 DOM 的 React，您不能直接修改它。
显然，在普通 JS 中，您只需执行 document.getElementsByClassName('main-header')[0].style.backgroundColor="green"; 但这在 Vue 中似乎违反直觉。
我是不是把它过于复杂了，实际上它是这样工作的吗？或者 Vue 是否有特定的处理方式？我一直在看https://v2.vuejs.org/v2/guide/class-and-style.html但它只是解释了如何绑定(bind)类。我也在阅读 https://v2.vuejs.org/v2/guide/events.html但是我很难找到我需要的关于定位元素/以某种方式修改它的东西......
如何在 Vue 上下文中选择和/或修改元素？
最佳答案
你是对的。在 Vue 中，直接与 DOM 交互是违反直觉的。
幸运的是，有一个指令允许您通过绑定(bind)到数据属性来直接应用样式更改。 (请记住，您也可以对类执行类似的操作)。
<h1 class="main-header" v-bind:style="{ color: activeColor}">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
在您的组件中，创建一个数据属性并在单击按钮时更新它:
data: {
message: 'Hello Vue!',
activeColor: 'red'
},
methods: {
colorChange: function() {
this.activeColor = 'green'
}
}
关于javascript - vue 上下文中的 getElementsByClassName，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53176101/
24
4
0
出现以下错误 Network access for Distributed Transaction Manager (MSDTC) has been disabled. Please enable D
在调试应用程序时出现以下错误。 The CLR has been unable to transition from COM context 0x3b2d70 to COM context 0x3b2
在 GAE Go 中，为了记录，我们需要使用 appengine.NewContext(r) 创建一个新的上下文，它返回 context.Context。 如何使用此上下文在请求范围内设置/获取变量？
我想使用 Puppeteer 从放置在页面上 iframe 内的选择器中获取数据，该页面在与其父框架域不同的域上运行。因此，我不是任何域的所有者 - 无法使用 frame.postMessage。 试
我正在尝试获取可用的应用程序上下文并想切换到 webview 上下文，但 appium 仅获取 Navive App。 应用程序还启用了 WebView。 Appium 版本:1.10.1 Chrom
这个问题在这里已经有了答案: How to fix this nullOk error when using the flutter_svg package? (7 个回答) 7 个月前关闭。 当我尝
我观看了关于 Core Data 的 2016 WWDC 视频并查看了各种教程。我见过使用 Core Data Framework 创建对象以持久保存到 managedObjectContext 中的
这是代码 obj = { a: 'some value'; m: function(){ alert(this.a); } } obj.m(); 结果是'som
我正在尝试做类似的事情 $(".className").click(function() { $(this).(".anotherClass").css("z-index","1");
var User = { Name: "Some Name", Age: 26, Show: function() { alert("Age= "+this.Age)}; }; fun
我目前正在使用我见过的常见 Context 模式，它允许子组件通过传递修饰函数来更新父组件的状态(即 Provider)通过共享的 Context。 我遇到的问题是，修改函数只引用原始状态，不引用最新
有没有办法让 React Context类型安全与流类型？ 例如: Button.contextTypes = { color: React.PropTypes.string }; 最佳答案 不幸
我想知道是否有一种方法可以为不同的功能使用不同的上下文类。 我希望有一个功能使用 MinkExtensions 进行浏览器测试，另一个功能使用和 HTTP 客户端(如 Guzzle)进行 API 测试
我有这个配置文件 apiVersion: v1 clusters: - cluster: server: [REDACTED] // IP of my cluster name: stag
我在实现非抢先式调度时遇到了用于初始化TCB的代码。 typedef struct TCB_t { struct TCB_t *next; struct TCB_t
我想将一个函数设置为数组中每个元素的属性，但使用不同的参数调用它。我想我会使用匿名函数来解决它: for ( var i = 0; i < object_count; i++ ) { obje
这个问题已经有答案了: How to access the correct `this` inside a callback (15 个回答) 已关闭 7 年前。 我正在做一些练习，但我在管道方法中丢
我正在尝试通过 Java 和 Android Studio 学习和制作 Android 应用程序。我对Java的了解程度是两年前几个小时的youtube学习和大学基础类(class)。不过我确实知道如
我在(这个)上遇到了问题。错误ImageView无法应用。我在 fragment 类中执行此代码。 ViewFlipper v_flipper; @Nullable @Override public
我想使用 openGL 的某些功能，但与渲染视觉内容无关。有没有办法在没有任何依赖性的情况下创建它(不是对 Windows，也不是某些包[SDL，SFML，GLUT])？只允许使用没有外部库的库，就像
我是一名优秀的程序员,十分优秀！