Vue:v-text、v-html指令

来自CloudWiki
跳转至： 导航， 搜索

概述

v-text、v-html这两者分为一组很好理解，一个用于绑定文本，一个用于绑定html。上文使用到的 {{ Name }}这种写法就是v-text的的缩写形式。这个很简单，没什么好纠结的，看一个Demo就能明白。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.js" type="text/javascript" charset="utf-8">

		</script>


		<title></title>
	</head>
    <body>
        <div id="app">
            <h1>姓名：<label v-text="Name"></label></h1>
            <h1>姓名：{{ Name }}</h1>
            <div style="font-size:30px;font-weight:bold;" v-html="Age">年龄：</div>
        </div>
    
        <script src="Content/vue/dist/vue.js"></script>
        <script type="text/javascript">
        //Model
        var data = {
            Name: '小明',
            Age: "<label>20</label>",
            School:'光明小学',
        }
    
        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
        });
        </script>
    </body>
</html>

代码说明

代码说明：

  • {{Name}}这种写法和v-text的作用是相同的，用于绑定标签的text属性。注意如果标签没有text属性，该绑定会失效，比如你在一个文本框上面使用v-text是没有效果的
  • 由得到的效果可以看出，v-html绑定后会覆盖原来标签里面的内容（比如上面的“年龄：”），记住此处是覆盖而非append。
  • 对于v-html应用的时候要慎重，在网站上动态渲染任意 HTML 有一定的危险存在，因为容易导致 XSS 跨站脚本攻击。所以最好是在信任的网址上面使用。
  • 注意v-text和v-html绑定都是单向的，只能从Model到View的绑定，不能实现View到Model的更新。

效果图

Vue2022040102.png

取自“http://www.openbrains.net/mediawiki/index.php?title=Vue:v-text、v-html指令&oldid=30044”