Vue入门（一）v-text、v-html以及插值表达式

最新推荐文章于 2024-05-06 20:52:53 发布

Ricardo.M.Lu

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量477

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42765792/article/details/112851931

版权

一、v-text、v-html以及插值表达式

1、插值表达式

{{ 变量名 }}形式取值.网络环境差可能出现插值闪烁的问题

2、 v-text、v-html

v-text:将变量绑定到指定位置，如果标签内有数据会覆盖原有数据，插值表达式则不会
v-html:功能与v-text类似，但v-html会解析变量内的html标签
v-text和v-html都可以会覆盖原有数据，都可以避免插值闪烁问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.min.js"></script>
<body>
<div>
<!--    mvvc中的view视图层-->
    <div id="app">
<!--        插值表达式
            {{ 变量名 }}形式取值.网络环境差可能出现插值闪烁的问题
-->
        {{name}}
<!--        v-text、v-html
            v-text:将变量绑定到指定位置，如果标签内有数据会覆盖原有数据，插值表达式则不会
            v-html:功能与v-text类似，但v-html会解析变量内的html标签
            v-text和v-html都可以会覆盖原有数据，都可以避免插值闪烁问题
-->
<!--       测试 -->
        <span v-text="name"></span>
<!--     测试链接，跳转到百度(一个超链接)   -->
        <span v-html="href"></span>
<!--      style='background: #0B1022'  -->
        <span v-html="text"></span>
    </div>
</div>
<script>
   var vue = new Vue(
       {
           //mvvc中的vc view model层
           //绑定id
           el:'#app',
           data:{
               //mvvc中的model
               name:'测试',
               href:"<a href='http://www.baidu.com'>测试链接，跳转到百度</a>",
               text:"style='background: #0B1022'"
           }
       }
   );
</script>
</body>
</html>

二、v-on

1、事件三要素

事件源:发生事件的html标签
事件:特定动作如单击,双击等
事件处理程序:使用函数来完成

2、v-on用于绑定事件

2.1绑定事件的两种方式

v-on:click=“事件函数名”
@click=“事件函数名”

2.2、在Vue对象内使用methods定义事件函数
1、
methods:{
事件函数名：function（参数）{方法体}
}
2、
methods:{
事件函数名（参数）{方法体}
}

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="vue.min.js"></script>
<div id="app">
    {{ age }}
<!--    v-on用于绑定事件
    绑定事件的两种方式
        1、v-on:click="事件函数名"
        2、@click="事件函数名"
    在Vue对象内使用methods定义事件函数
    1、
        methods:{
            事件函数名：function（参数）{方法体}
        }


    2、
         methods:{
            事件函数名（参数）{方法体}
        }
-->
    <button v-on:click="add">+</button>
    <button @click="d">-</button>
</div>
</body>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            age:12
        },
        methods:{
            add:function () {
                this.age++;
                console.log(this)
            },
            d () {
                this.age--;
            }
        }
    });
</script>
</html>

Ricardo.M.Lu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门（一）v-text、v-html以及插值表达式

一、v-text、v-html以及插值表达式1、插值表达式{{ 变量名 }}形式取值.网络环境差可能出现插值闪烁的问题2、 v-text、v-htmlv-text:将变量绑定到指定位置，如果标签内有数据会覆盖原有数据，插值表达式则不会v-html:功能与v-text类似，但v-html会解析变量内的html标签v-text和v-html都可以会覆盖原有数据，都可以避免插值闪烁问题<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫