Vue：Vue基础知识之学会使用v-text、v-html两个指令
1、index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js实例</title>
</head>
<body>
<h1>Vue2.0实例</h1>
<hr>
<ol>
<li><a href='./example/helloword.html'>Hello World实例</a></li>
<li><a href='./example/v-if.html'>v-if&v-else&v-show</a></li>
<li><a href='./example/v-for.html'>v-for实例</a></li>
<li><a href='./example/v-text.html'>v-text & v-html实例</a></li>
</ol>
</body>
</html>2、v-text.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-text & v-html实例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
<h1>HelloWorld</h1>
<hr>
<div id="app" >
<!-- 模板的输出方式，把message变量渲染到模板里 -->
<!-- {{message}}渲染模板 -->
<!-- 实际开发中，v-text方法输出文本内容(渲染模板)会给用户更友好的方式 -->
<span>{{message}}</span> = <span v-text= 'message' ></span> <br>
<!-- 下边这种标签会引起黑客的xss攻击 -->
<span v-html='dodo'></span>
</div>
<script type='text/javascript'>
//声明变量且实例化(生成器)
var app =new Vue({
el:'#app',
data:{
message:'欢迎进入机器学习的世界！',
dodo:'<h2> 欢迎进入深度学习的世界！</h2>'
}
})
</script>
</body>
</html>
1688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
