vue初识，创建实例绑定容器，基本数据处理，v-if,v-else,v-else-if,v-text,v-html，v-show的含义
<!DOCTYPE html>
<html>
<head>
<title>Vue 初识</title>
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
<!-- 绑定 Vue 的容器 -->
<div id="app">
<!-- 条件渲染 -->
<div v-if="type === 'A'">
A 类信息
</div>
<div v-else-if="type === 'B'">
B 类信息
</div>
<div v-else-if="type === 'C'">
C 类信息
</div>
<div v-else>
其他类信息
</div>
<!-- 文本插值 -->
<p>{{ message }}</p>
<!-- HTML 插值，注意：不建议使用，可能会引起XSS攻击 -->
<div v-html="rawHtml"></div>
<!-- 事件绑定 -->
<button v-on:click="sayHello">点击我</button>
</div>
<script>
// 创建 Vue 实例
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
rawHtml: '<strong>Bold Message</strong>',
type: 'A' // 根据这个属性来切换条件渲染
},
methods: {
sayHello: function() {
alert('Hello, Vue!');
}
}
});
</script>
</body>
</html>这段代码展示了如何使用Vue.js创建一个简单的应用，包括条件渲染、文本插值、HTML插值和事件绑定。注意，在实际开发中应避免使用v-html，因为它可能会引入XSS攻击风险。
评论已关闭