【前端】【vue 3-6】点击文本内容,根据点击,切换class属性

<html>
<title>test</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.activated{
    color: red
}
</style>
<body><div id="app" @click="hanleddivclick" :class="{activated:isactivated}">
hello word
</div>
<script>
var vm = new Vue({
    el:"#app",
    data:{
        isactivated:false
    },
    methods:{
        hanleddivclick:function(){
            this.isactivated = !this.isactivated;
        }
    }
})
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/stevenlii/p/9159714.html

时间: 2024-10-09 21:37:22

【前端】【vue 3-6】点击文本内容,根据点击,切换class属性的相关文章

win8不通过新打开窗口进行打开和保存文件,点击即显示文本内容,点击即保存文件

前面的一篇博客讲到通过打开新窗口进行打开和保存文件,这一篇则重点介绍怎样一步到位来进行打开和保存文件(这里还以.txt文本文件为例). 我们要打开.txt文本文件,无非是想要里面的文本内容,并且把其显示到页面里罢了,那我们能不能直接点击按钮就让文件的内容自动显示到页面上............ 而不需要经过打开新窗口这一步骤呢 同样,我们点击保存按钮,能不能就直接给文件命名为自己想要的名称,而且直接保存到自己想要的位置或者文件里........ 而不经过打开新窗口定位某一个具体的文件夹下这一步骤

折叠多余文本内容,点击查看更多

command:设定规定的行数,当文本内容超过时,折叠并有一个“查看更多”的按钮 step1:编写html...... <p statue="0" class="text close_text"> //status是自定义的属性,“0”是false,“1”为True texttexttextvvshjhhsbcnxgfggggkshjahcjbkjciwhiuheohbcjkbcnzlkxkjidjoieklkxm.,cxzmkcowdjijdpoweo

jQuery实现点击文本框清除内容代码实例

jQuery实现点击文本框清除内容代码实例:本章节介绍一下文本框最简单的一个人性化措施,就是点击文本框的时候能够删除里面的提示文本.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

Android Studio EditText点击图标清除文本内容

这篇文章是继自定义EditText样式之后的功能强化,对于实际应用项目有很大的参考意见,感兴趣的朋友可以移步上一篇,"Android Studion自定义EditText样式".具体清除EditText文本内容功能代码如下: package com.liheng; import android.content.Context; import android.graphics.Rect; import android.graphics.drawable.Drawable; import

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容. Textarea 单击鼠标 清除默认字 点击文本域 默认内容消失 点击文本框 删除预置内容 在留言框.搜索栏或者Email订阅栏中有一段默认的文本,比如“请输入您的内容”,如果你在其中点击(窗体获取焦点),这段默认的文本就会自动消失. 第一步:添加代码方式: <head> …. <script type=”text/javascript”> function clearDefault(el

点击文本框清除默认文本离开再恢复

点击文本框清除默认文本离开再恢复:很多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

如何实现点击文本框清除其中文本

如何实现点击文本框清除其中文本: 此种效果经常用在搜索框中,默认状态下搜索框中有提示语言,当点击搜索框时会清除其中的文本,下面就来简单介绍一下如何实现此种效果.尽管此效果没有用到CSS代码,因为代码比较常用,所以在这里也介绍一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:

逃的过初一逃不过十五之三个输入框文本内容检测的实现及测试

上周偷懒来着,就没有完成EditBox的实现,来进行测试...终于,这周逃不过了,老师布置的任务是完成三个文本框的输入并同时检测文本内容... 题目要求如下: 允许1到6个英文字符或数字,按OK结束 有效等价类: 长度:1到6:字符:a-z,A-Z,0-9 无效等价类:长度:0,7:字符:英文.数字以外字符,控制字符,标点符号等 略有不同的地方是这回要求三个文本框同时输入内容,点击OK之后同时对三个文本框的内容进行检测,并输出检测结果. 好~偷懒考虑,我就选择了比较好用的JAVA进行实现,主要原

Android中实现APP文本内容的分享发送与接收方法简述

谨记(指定选择器Intent.createChooser()) 开始今天的内容前,先闲聊一下: (1)突然有一天头脑风暴,对很多问题有了新的看法和见解,迫不及待的想要分享给大家,文档已经写好了,我需要通过微信或者QQ,短信等社交工具发送给大家. (2)在网上发现一段特别好的文章,想要保存收藏下来. 上面描述了进入智能手机时代后,我们经常遇到的两种情况,那么作为开发者的我们如何让自己开发的APP实现这两种功能呢,下面我们以实现文本的发送分享以及接收来梳理下两种功能的实现过程(其他类型的数据在博文末