vue文本指令跟事件指令

最新推荐文章于 2024-08-26 08:30:34 发布
最新推荐文章于 2024-08-26 08:30:34 发布
阅读量790 收藏 28
点赞数 20
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58310590/article/details/139050593
版权

【文本指令】

# vue 的指令系统
	-1 写在标签上
    -2 以 v- 开头 都称之为vue的指令，有特殊含义
    
# 文本指令主要用来操作文本
	v-text:把文字渲染到标签内
    v-html:把文字渲染到标签内，如果是标签会渲染标签
    v-show：控制标签显示与否，隐藏
    v-if：控制标签显示与否，真的删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app01">
    <h2> v-text:跟之前的插放一样</h2>
    <p v-text="name">v-text</p>
    <h2>v-html:跟之前的插放一样,渲染页面</h2>
    <p v-html="a">v-html</p>

    <h2>v-show  控制标签显示与否 没有删除标签，只是隐藏</h2>
    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.Rmu2HNfPTot9nN9kWt0dbgHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=2.6&pid=3.1&rm=2" v-show="B" height="200px" width="200px">
    <p>v-show</p>
    <hr>
    <h2>v-if ：控制标签显示与否 直接把标签删除</h2>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo?w=269&h=180&c=7&r=0&o=5&dpr=2.6&pid=1.7" v-if="if_show" height="200px" width="200px">
    <p>v-if</p>
    <h2></h2>
    <h2></h2>

</div>
<script>
    var vm = new Vue({
        el: "#app01",
        data: {
            name: "jing",
            a: '<a href="https://www.yituyu.com/">点我有惊喜噢！！！</a>',
            B: true,
            if_show: false
        }
    })

</script>

</body>
</html>

image-20240424205940296

【 事件指令 】

v-on:事件名='hand'
v-on:click ='hand'
简写成（用的多）
@click='hand'
方法必须放在methods中
  methods: {
        hand: function () {
            this.show = !this.show  // ! 取反
        }
    }
  • 在Vue.js中，使用 v-on:click 或简写 @click 指令可以监听DOM元素的点击事件，并在触发时执行相应的方法。通常情况下，你需要在Vue组件的 <script> 部分的 methods 中定义一个与事件处理相关的函数，比如你提到的 hand 函数，然后在模板中使用 v-on:click="hand" 将该函数与点击事件绑定起来。
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 在这里编写处理点击事件的逻辑
      console.log('Button clicked!');
    }
  }
}
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app01">
    <h2> v-text:跟之前的插放一样</h2>
    <p v-text="name">v-text</p>
    <h2>v-html:跟之前的插放一样,渲染页面</h2>
    <p v-html="a">v-html</p>

    <h2>v-show  控制标签显示与否 没有删除标签，只是隐藏</h2>
    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.Rmu2HNfPTot9nN9kWt0dbgHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=2.6&pid=3.1&rm=2" v-show="B" height="200px" width="200px">
    <p>v-show</p>
    <hr>
    <h2>v-if ：控制标签显示与否 直接把标签删除</h2>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo?w=269&h=180&c=7&r=0&o=5&dpr=2.6&pid=1.7" v-if="if_show" height="200px" width="200px">
    <p>v-if</p>
    <h2>v-on:事件名='hand' 点击隐藏再点击显示！！！</h2>
    <p @click="hand" style="color: aqua">点我点我</p>
    <h2></h2>

</div>
<script>
    var vm = new Vue({
        el: "#app01",
        data: {
            name: "jing",
            a: '<a href="https://www.yituyu.com/">点我有惊喜噢！！！</a>',
            // 显示true隐藏false
            B: true,
            if_show: false
        },
        methods:{
            hand:function (){
                this.B = !this.B // 取反
            }
        }
    })

</script>

</body>
</html>

转播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app01">
    <h2>v-show 控制标签显示与否 没有删除标签，只是隐藏</h2>
    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.Rmu2HNfPTot9nN9kWt0dbgHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=2.6&pid=3.1&rm=2"
         v-show="B" height="200px" width="200px">
    <p>v-show</p>
    <hr>
    <h2>v-if ：控制标签显示与否 直接把标签删除</h2>
    <span>文件指令</span>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo?w=269&h=180&c=7&r=0&o=5&dpr=2.6&pid=1.7"
         v-if="if_show" height="200px" width="200px">
    <p>v-if</p>
    
    <span>事件指令</span>
    <h2>v-on:事件名='hand' 点击隐藏再点击显示！！！</h2>
    <p @click="hand" style="color: aqua">点我点我</p>
    <h2>v-bind可以简化成:冒号</h2>
    
    <span>属性指令</span>
    <img :src="image" height="300px" width="300px">
    <h2>111111111111</h2>
    <button @click="startStop">{{ isRunning ? '停止' : '开始' }}</button>
</div>
<script>
    var vm = new Vue({
        el: "#app01",
        data: {
            name: "jing",
            a: '<a href="https://www.yituyu.com/">点我有惊喜噢！！！</a>',
            B: true,
            timer: null,
            if_show: false,
            image: "img/16.jpg",
            images: [
                "img/14.jpg",
                "img/15.jpg",
                "img/20.jpg",
                "img/21.jpg",
                "img/22.jpg",
                "img/23.jpg",
                "img/24.jpg",
            ],
            isRunning: false,
            pohots: 0 // 添加currentIndex属性来追踪当前图片索引
        },
        methods: {
            hand: function () {
                this.B = !this.B;
            },
            startStop: function () {
                if (this.isRunning) {
                    // 清除由 setInterval(函数,时间) 设置的定时器
                    clearInterval(this.timer);
                } else {
                    //
                    this.timer = setInterval(this.nextImage, 1000);
                }
                this.isRunning = !this.isRunning;
            },
            nextImage() {
                this.pohots = (this.pohots + 1) % this.images.length;
                this.image = this.images[this.pohots];
            }
        }
    });
</script>
</body>
</html>

  • 方法

​ clearInterval() 是用来清除由 setInterval() 设置的定时器。在 JavaScript 中，setInterval() 函数用于每隔一段时间重复执行指定的代码。而 clearInterval() 则用于停止这个重复执行的过程，即清除定时器，使其不再触发。

​ 示例中，clearInterval(this.timer) 用于停止图片轮播的定时器，确保当用户点击按钮暂停轮播时，不再继续触发下一张图片的显示。

​ setInterval() 是 JavaScript 中的一个函数，用于周期性地执行指定的代码。它接受两个参数：要执行的代码或函数，以及执行代码之间的时间间隔（以毫秒为单位）。

​ 例如，如果你想每隔一段时间显示一次消息，你可以使用 setInterval() 函数来实现：

setInterval(function() {
    console.log("Hello, world!");
}, 1000); // 每隔1秒钟打印一次 "Hello, world!"

image-20240424221625198

image-20240424221638144

m0_58310590
关注
Vue(17)模板语法：文本、超文本、属性、完全支持JS表达式
大连赵哥的博客
06-18 222
Vue(17)模板语法：文本、超文本、属性、完全支持JS表达式
Vue自定义弹窗指令的实现代码
10-18
在Vue.js框架中，自定义指令是一种扩展Vue组件行为的方式，它们可以被添加到任何元素上。这篇文章主要讲解了在Vue2.0版本中如何创建一个自定义弹窗指令，使得具有该指令的标签在被点击时能够显示一个弹窗。 ### ...
vue 文本中的\n 、＜br＞换行显示
CC酱写前端的博客
05-08 6199
注意： style中white-sapce: pre-wrap;一、背景： 后端接口返回数据以\n 作为换行符，前端显示时候需要换行显示；二、br 换行（可以使用v-html）三、把br替换成\n换行。
Vue：快捷文本
最新发布
MMF博客园
08-26 1621
Vue：快捷文本
vue的文本
小汤圆
07-14 288
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <
Vue 第一讲（文本及超链接渲染）
weixin_51927215的博客
04-18 5323
二层花括号语法及 v-html 超链接渲染
【Vue】模板语法——文本插值
早睡早起长头发的博客
02-01 1721
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache），在实际开发中用的最多。在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还。只是内容的占位符，不会覆盖原有的内容。
VUE2.x
踩的坑越多，经验越多
10-30 1146
vue2.x学习笔记总结
如何用vue实现文本的编辑
weixin_43997182的博客
07-15 4000
vue+element 实现文本编辑
详解vue中v-on事件监听指令的基本用法
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的特性，包括`v-on`事件监听指令，用于处理用户交互。本文将深入解析`v-on`的基本用法，并通过实例演示如何在Vue应用中有效地监听和响应用户事件。 一、...
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
在Vue.js应用中，`v-html`指令用于将纯HTML字符串插入到DOM中，而不是作为文本内容。然而，当使用`v-html`渲染富文本时，可能会遇到一个问题：无法通过CSS样式表修改这些动态插入的元素样式。这个问题的原因在于Vue...
Vue 自定义指令实现一键 Copy功能
10-16
在Vue框架中，自定义指令是扩展Vue功能的一个强大方式。自定义指令通过提供一些钩子函数，使得开发者可以自定义指令的行为。这些钩子函数包括bind、inserted、update、componentUpdated和unbind。每个钩子函数都将在...
Vue自定义指令拖拽功能示例
08-31
Vue.js 是一个流行的前端JavaScript框架，它允许开发者创建可复用和可维护的组件。...通过自定义指令，Vue提供了对DOM操作的精细控制，以及对键盘事件的自定义处理，使开发更灵活，能够实现更多复杂的交互功能。
【超详细】vue项目：Tinymce富文本使用教程以及踩坑总结+业务需要功能扩展
热门推荐
weixin_55846296的博客
12-01 1万+
在Vue项目的开发过程中，经常需要使用富文本编辑器来处理用户的输入内容。 是一个功能强大且易于使用的富文本编辑器，它支持大多数常见的文本编辑功能，并且可以通过插件进行扩展。本文将详细介绍如何在Vue项目中使用Tinymce富文本编辑器
Vue中文本渲染三种方法 {{}}、v-html、v-text的区别
编程界明世隐的博客
03-10 3810
v-text 说明：显示普通文本 简写方式：{{}} 语法： 1：<p v-text="msg"></p> 2：<p>{{msg}}</p> 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> &l
vue、js onSelect事件 获取选中的值
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-26 5910
onselect属性可用于,,,,和.主要是借用event获取其值和selectionStart选中下标起始selectionEnd选中的下标结束。然后字符串截取出来。作用当文本被选中时，执行一段Javascript代码。onselect事件会在文本框中的文本被选中时发生。 vue、js onSelect事件 获取选中的值......
Vue实现富文本
胡兜兜的博客
04-03 4936
在Vue中使用wangEditor可以参考官方文档中的Vue集成部分。Quill是一个强大的富文本编辑器，支持多种格式和自定义样式。在Vue中使用Quill可以参考官方文档中的Vue集成部分。Vue富文本的实现可以使用一些现成的第三方库，如Quill、Vue-quill-editor、wangEditor等。Vue-quill-editor是一个基于Quill的Vue富文本编辑器，可以很方便地在Vue中使用。以上是三种常用的Vue富文本编辑器实现方式，可以根据自己的需求选择合适的方式。
Vue（五）点击事件
Good Luck
05-17 164
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--Vue安装--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> &l.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值