◆通过Vue实现常见的网页效果
◆学习Vue指令,以案例巩固知识点
◆Vue指令指的是,以v-开头的- -组特殊语法
◆v-text指令的作用是:设置标签的内容(textContent)
◆默认写法会替换全部内容,使用差值表达式{}可以替换指定内容
◆内部支持写表达式
结果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>V-TEXT指令</title>
</head>
<body>
<div id="app">
<h2 v-text="msg+'拼接的字符串'">深圳</h2>
<h2 v-text="info+'拼接的字符串'">深圳</h2>
<h2>
{{msg+'拼接的字符串'}}深圳
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
<script>
var app = new Vue(
{
el:"#app",
data:{msg:"你好呀！VUE！",
info:"这是一个info！"}
}
)
</script>
</body>
</html>
原创文章 643
获赞 1975
访问量 129万+