vue-指令的属性和方法

最新推荐文章于 2023-08-18 16:57:00 发布

Gypsophila 、

最新推荐文章于 2023-08-18 16:57:00 发布

阅读量268

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/O_326326/article/details/108921374

版权

本文详细介绍了Vue.js中v-text和v-html指令的区别，v-text不解析HTML标签，而v-html则可以。同时，文章还探讨了v-if和v-show在条件渲染上的差异，v-if会创建和销毁元素，而v-show只是简单地切换元素的display属性。通过实例展示了它们在实际应用中的用法。

摘要由CSDN通过智能技术生成

1.v-text和v-html的区别：

相同点：
- 都覆盖掉所在元素的子节点
  - 都可以去渲染数据
不同点：
- text不能解析HTML标签
  - html可以解析html标签

 	<h1>Hello {{name}}</h1>
        <div v-text=" name + '说好热呀'  ">
            <p>我是v-text</p>
            <input type="text">
        </div>

        <h2 v-html=" name + '今年' + age + '了' ">
            <p>我是v-html</p>
            <input type="text">
        </h2>

	new Vue({
            el:"#app",
            data:{
                name:"Lisa",
                sex:"女",
                age:"18"
            }
        })

2.v-show：显示和隐藏
v-if：创建和销毁

		<button >显示</button>
        <button>隐藏</button>
        <div v-cloak v-if="msg"></div>
        let app = new Vue({
            // el:"#app",
            template:` <div class="box" v-if="msg"></div>`,
            data:{
                msg:true,
                name:"<strong>任涛</strong>",
                sex:"未知",
                age:"18",
                hobby:"王者峡谷"
            }
        });

        //延迟挂载
        setTimeout(()=>{
            app.$mount('#app');
        },2000);