vue基本模板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--模板语法1 插值表达式 以2个花括号开始的-->
<!--<div id="app">
{{name}}
<!--</div>-->


<div id="app">
<div>{{name +'lee'}}</div><!--//插值表达式和v-text功能是一致的-->
<div v-text="name + 'lee'"></div> <!--模板语法2 vue指令后面跟着一个值的时候,这个值不是字符串,是js表达式 让<div></div>标签内的内容换成vue实例里data里name变量里数据内容-->
<div v-html="name + 'lee'"></div> <!--将innerhtml里的内容与data里变量name下的内容进行绑定-->
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"<h1>dell</h1>"
}
})
</script>
<!--//当name变量里含有标签时,v-text不会理会标签的含义,直接当做文字输出,而v-html会翻译标签含义-->
<!--v-text v-html以及插值表达式里都可以写字符串-->

</html>


猜你喜欢

转载自blog.csdn.net/qq_41153478/article/details/80307786
今日推荐