vue指令-1.内容渲染指令-CFANZ编程社区

1.内容渲染指令：v-html,v-text,插值表达式{{}}

区别：v-html可以渲染为页面的HTML元素，而v-text只能渲染为文本内容，但是这两个都会覆盖原来的内容。{{}}插值表达式不会覆盖原来的内容

例如：当data里面的info:

'<h2 style="color:red;font-weight:bold">欢迎大家来学习 vue.js</h4>'

<div v-html='info'>你好</div>，则结果会显示

欢迎大家来学习 vue.js

<div v-text='info'>你好</div>时，结果显示

'<h2 style="color:red;font-weight:bold">欢迎大家来学习 vue.js</h4>'

不需要覆盖原来的内容时，一般使用{{}}插值表达式

data里面的数据为:username:'张三'

<p>姓名：{{username}}</p>

显示的是：姓名：张三

ps:注意vue的使用方法

1.先导入vue.js

2.创建实例对象

const vm=new Vue({

el:'#app' //这里代表vue的作用范围为id=app的区域

data:{} //写入需要用到的数据

methods:{} //注意有s,我一般都会忘，里面写的是事件渲染事件，后面会提到

})

最后来个完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--//希望Vue能够控制下面这个div,帮我们在把数据填充到div内部-->
<div id="app">
    <p v-text="username"></p>
<!--  v-text会覆盖原来的内容  -->
    <p v-text="gender">性别：</p>
    <hr>
    <!--    {{}} 不会覆盖原来的内容-->
    <p>姓名：{{username}}</p>
    <p>性别：{{gender}}</p>
    <hr>
    <div v-text="info"></div>
    <div>{{info}}</div>
    <div v-html="info"></div>
<!-- v-text指令和插值表达式只能渲染纯文本内容，如果要把包含html标签党的字符串渲染为页面的HTML元素，则需要用到v-html指令   -->

</div>
<!-- 1.导入vue的库文件，在全局就有vue这个构造函数-->
<script src="./lib/vue-2.6.12.js"></script>
<!--2.创建vue实例对象-->
<script>
    //创建vue实例对象
    const vm = new Vue({
        //el属性是固定写法，表示当前vue控制的区域，接收的值是一个选择器
        el: '#app',
        //data对象就是要渲染到页面上的数据
        data:{
            username:'zhangsan',
            gender:'女',
            info:'<h2 style="color:red;font-weight:bold">欢迎大家来学习 vue.js</h4>'
        }
    })
</script>
</body>
</html>