Vue.js基本指令v-text，v-html，v-bind，v-on

最新推荐文章于 2024-07-25 11:05:20 发布

小伟同学

最新推荐文章于 2024-07-25 11:05:20 发布

阅读量670

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41416856/article/details/91799105

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先记住这句话：Vue.js的指令都是带有 v- 前缀的。

Vue指令 v-text

在vue.js中我们除了使用插值表达式将data中包含属性的属性值在标签中进行展示之外，我们还可以通过指令将其展示出来

v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
v-text只会显示文本内容，并不会显示标签

<body>
    <div id="app">
    	<p>{{msg1}}</p>
        <p v-text="msg1"></p>
        <p v-text="msg2"></p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: "这是对应的值",
                msg2: "<h1>这是对应的值</h1>"
            },
            methods: {}
        });
    </script>
</body>

Vue指令 v-html

v-html同样是用来显示data中属性的属性值的（数据绑定），此指令不仅可以显示文本内容，还可以显示带标签的内容

<body>
    <div id="app">
    	<p>{{msg1}}</p>
        <p v-html="msg1"></p>
        <p v-html="msg2"></p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: "这是对应的值",
                msg2: "<h1>这是对应的值</h1>"
            },
            methods: {}
        });
    </script>
</body>

Vue指令 v-bind 的三种用法

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

<body>
    <div id="app">
    	<!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
    	<input type="button" value="按钮" v-bind:title="mytitle">
    	<input type="button" value="按钮" v-bind:title="mytitle + '123'">
    	<input type="button" value="按钮" :title="mytitle">
    	<!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
    	<!-- v-bind 中，可以写合法的JS表达式 -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mytitle: '这是一个自己定义的title'
            },
            methods: {}
        });
    </script>
</body>

Vue指令 v-on 事件绑定机制

直接使用指令v-on
使用简化指令@

<body>
    <div id="app">
    	<!-- Vue 中提供了 v-on: 事件绑定机制 -->
    	<input type="button" value="按钮"  v-on:click="alert('hello')">
    	<input type="button" value="按钮" v-on:click="show">
    	<input type="button" value="按钮" @:click="show">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
		        show: function () {
		          alert('Hello')
		        }
	     	}
        });
    </script>
</body>

小伟同学

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js基本指令v-text，v-html，v-bind，v-on

先记住这句话：Vue.js的指令都是带有 v- 前缀的。Vue指令 v-text在vue.js中我们除了使用插值表达式将data中包含属性的属性值在标签中进行展示之外，我们还可以通过指令将其展示出来v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空v-text只会显示文本内容，并不会显示标签<body> ...
复制链接

扫一扫

专栏目录