Vue.js学习之路（三）设置文本、绑定事件

最新推荐文章于 2023-07-15 17:24:12 发布

Jesmine mm

最新推荐文章于 2023-07-15 17:24:12 发布

阅读量372

点赞数

本文链接：https://blog.csdn.net/qq_41342504/article/details/104591008

版权

一、设置标签的文本值——v-text

通过v-text可以对标签的属性值进行设置，把data中的定义的数据实时绑定在标签上，

但是如果标签内部有内容，是会把里边的内容覆盖哦。

调试下边的代码试试吧！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Vue学习（三）</title>
</head>
<body>
    <div id="app">
        <h3 v-text="message"> </h3>
        <h3 v-text="message"> 你好！ </h3>
        <h3>你好！{{message}}  </h3>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "吃饭了吗？",
            }
        })
    </script>
</body>
</html>

当然对于v-text属性是可以使用字符串的拼接的，直接使用表达式的规则就可。

  //div部分  
    <div id="app">
        <h3 v-text="message+'我是'+name">  </h3>
        <h3> {{message+'我是'+name}} </h3>
    </div>
  //script部分 
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好!", 
                name: "默默"
            }
        })
    </script>

二、设置innerHTML——v-html

用法与v-text相似，只是对于赋给他的值如果是HTML结构，就可以直接解析成相应的结构。

  //div部分  
    <div id="app">
        <h3 v-text="message">  </h3>
        <h3 v-html="message">  </h3>
    </div>
  //script部分 
    <script>
        var app = new Vue({
            el: "#app",
            data: {
             message: "<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>

三、绑定事件——v-on

书写方式：v-on：事件名="方法名"

简写方式：@事件名="方法名"

定义方法时写在methods里

下边的例子用的是最简单的单击事件，其他事件可以再官方文档中查看。

//div部分  
    <div id="app">
        <input type="button" value="事件绑定" v-on：click="dolt">
        <input type="button" value="事件绑定" @click="dolt">
    </div>
//script部分 
    <script>
        var app = new Vue({
            el: "#app",
            methods:(){
              dolt:function(){
             alert("你好呀！")
            }
        }
        })
    </script>

同样，函数也是可以传递参数的，用法同.net 语言，不再赘述。

Jesmine mm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习之路（三）设置文本、绑定事件

一、设置标签的文本值——v-text通过v-text可以对标签的属性值进行设置，把data中的定义的数据实时绑定在标签上，但是如果标签内部有内容，是会把里边的内容覆盖哦。调试下边的代码试试吧！<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <me...
复制链接

扫一扫