vue-本地应用指令之v-text v-html v-on

最新推荐文章于 2023-04-26 15:53:13 发布

打怪进阶选手安好

最新推荐文章于 2023-04-26 15:53:13 发布

阅读量369

点赞数

分类专栏： vue基础文章标签： vue html 前端

本文链接：https://blog.csdn.net/qq_43573285/article/details/119349902

版权

vue基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue-本地应用指令之v-text v-html v-on

概念：v-开头的一组特殊语法

1 内容绑定，事件绑定

v-text

v-html

v-on

v-text

运行代码

<!DOCTYPE html>

<html>

  <head>

        <meta charset="UTF-8">

        <meta name="viewpoint" content="width=device-width,initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue</title>



     

  </head>

  <body>

        <div id="app">

      <h2 v-text="message"></h2>

      <h2 v-text="info"></h2>

      <h2> {{message}} 武汉加油 </h2>

  

    </div>



          <!-- 开发环境版本，包含了有帮助的命令行警告 -->

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>

      var app=new Vue(

        {

          el:"#app",

          data:{

            message:"v-text的测试",

            info:"展示的信息"

          }

        }

      )

    </script>

  </body>

</html>

运行结果

在这里插入图片描述

总结

v-text 设置标签的内容

默认写法是全部替换，使用差值表达式{{}}可以替换指定的内容

同时也可以进行其他文字修饰的添加即内部支持写表达式

v-html与v-text联系

v-text 与v-html在content的内容是普通文本的时候两者的使用没有区别，只有在链接的时候，才凸显出差异

运行代码

 <body>

         <div id="app">

            <p v-html="content"></p>

            <p v-text="content"></p>

    </div>



          <!-- 开发环境版本，包含了有帮助的命令行警告 -->

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>

      var app=new Vue(

        {

          el:"#app",

          data:{

            content:"网页链接v-html"

            

          }

        }

      )

    </script>

  </body>

运行结果

在这里插入图片描述

当为html链接的时候

运行代码

<!DOCTYPE html>

<html>

  <head>

        <meta charset="UTF-8">

        <meta name="viewpoint" content="width=device-width,initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>v-html</title>



     

  </head>

  <body>

         <div id="app">

            <p v-html="content"></p>

            <p v-text="content"></p>

    </div>



          <!-- 开发环境版本，包含了有帮助的命令行警告 -->

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>

      var app=new Vue(

        {

          el:"#app",

          data:{

            // content:"网页链接v-html"

            content:"<a href='https://baike.baidu.com/item/%E5%88%98%E5%AE%AA%E5%8D%8E/8687965'>刘宪华百度百科</a>"

            

          }

        }

      )

    </script>

  </body>

</html>

运行结果

在这里插入图片描述

显示出来的结果，第一个问文字链接到地址，而第二个只是显示了文本

v-on

基本语法

<input type="button" value="事件绑定" v-on:事件名="方法">

点击事件：<input type="button" value="事件绑定" v-on:click="方法">

鼠标移动事件：<input type="button" value="事件绑定" v-on:monseenter="方法">

双击事件：<input type="button" value="事件绑定" v-on:dbclick="方法">

双击事件另外一种写法v-on:dbclick=@dbclick 两种方式都支持

故：<input type="button" value="事件绑定" @dbclick="方法">

按钮对应事件实现

实现按钮的单击双击，显示对应的成果

代码实现

   <body>
         <div id="app">
           <input type="button" value="v-on指令" v-on:click="doIt">
    	   <input type="button" value="v-on简写" @click="doIt()">
    	   <input type="button" value="双击事件" @dblclick="doIt()" />
    	   <!-- value的值显示的是在页面中可见的提示信息 -->
        </div>
    
                    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
            var app=new Vue(
                {
                    el:"#app",
                    methods:{
                        doIt:function(){
                            alert("前端小白打怪");
                        }
                    }
                }
            )
        </script>
    </body>

运行结果

在这里插入图片描述

当事务复杂的时候

1 实现了点击在终端输出文字

代码实现

<h2 @click="changeFood()">{{food}}</h2>

		   <!-- value的值显示的是在页面中可见的提示信息 -->
	    </div>
	                <!-- 开发环境版本，包含了有帮助的命令行警告 -->
	    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	    <script>
	        var app=new Vue(
	            {
	                el:"#app",
					data:{
						food:"酸奶"
					},
	                methods:{
	                    doIt:function(){
	                        alert("前端小白打怪");
							},
						changeFood:function(){
							//console.log(this.food);
							//此时输出的含义是，当点击动作发生时，在控制台输出了酸奶
							this.food+="好好吃！";
							//实现点击的时候，在food后面添加汉字
						}
	                },
	            }
	        )
	    </script>

在这里插入图片描述

2 实现点击在后面加字

changeFood:function(){
							//console.log(this.food);
							//此时输出的含义是，当点击动作发生时，在控制台输出了酸奶
							this.food+="好好吃！";
							//实现点击的时候，在food后面添加汉字
						}

实现效果

在这里插入图片描述

总结

v-on：

为元素绑定事件；

指令简写@；

绑定的方法定义在Methods中；

方法内部通过this关键字访问定义在data中国的数据

打怪进阶选手安好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-本地应用指令之v-text v-html v-on

vue-本地应用指令之v-text v-html v-on文章目录vue-本地应用指令之v-text v-html v-onv-text运行代码运行结果总结v-html与v-text联系运行代码运行结果当为html链接的时候运行代码运行结果v-on基本语法按钮对应事件实现代码实现运行结果当事务复杂的时候代码实现实现效果总结概念：v-开头的一组特殊语法1 内容绑定，事件绑定v-textv-htmlv-onv-text运行代码<!DOCTYPE html><html&gt
复制链接

扫一扫