方法

我们必须使用 this. 前缀从方法中引用 Vue 实例数据属性内的"xPos"。

如果我们将上面的示例仅扩展一行，我们还可以根据鼠标指针在 x 方向上的位置来改变背景颜色。 我们唯一需要添加的是 v-bind 来更改 style 属性中的背景颜色:

示例

与上面示例的区别在于，背景颜色通过 v-bind 绑定到"xPos"，因此 hsl"hue"值设置为等于"xPos"。

在下面的示例中，事件对象携带 </code> 标签中的文本，使其看起来像我们正在笔记本中书写。</p> <h3>示例</h3> <p><code class="w3-codespan">v-on</code> 指令用于 <code class="w3-codespan"><textarea></code> 标签，以侦听"input"事件，每当 textarea 元素内的文本发生更改时就会发生该事件。</p> <p>当"input"事件发生时，将调用"writeText"方法，并且默认使用该方法发送事件对象，以便我们可以从 <code class="w3-codespan"><textarea></code> 标签获取文本。 Vue 实例中的"text"属性由"writeText"方法更新。 span 元素设置为使用双花括号语法显示"text"值，并且由 Vue 自动更新。</p> <div id="app">   <textarea v-on:input="writeText" placeholder="Start writing..">   {{ text }}