vue-模板应用之条件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板指令</title>
<script src="../vue.js"></script>
<style>
#top_hello{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>hello</h1>
<!-- 使用v-bind来实现来动态绑定便签的样式表 尝试修改:-->
<!-- <h1 v-bind:id="id_1">hello</h1>-->
<p>模板数字: {{number}}</p>
<!-- {{}}在插值时还可以直接使用js的表达式 尝试修改:-->
<!-- <p>模板数字: {{number ** 2}}</p>-->
<p>模板结果: {{result}}</p>
<!-- 如果使用v-once指令那么一旦渲染则不再变化 尝试修改:-->
<!-- <p v-once>模板结果: {{result}}</p> -->
<!-- 对于html代码的插值则需要使用v-html -->
<p>html插值文字: <span v-html="insert_html_code"></span></p>
<!-- v-if是条件渲染 只有其为布尔值true时才会被渲染-->
<p v-if="true">这是一段会被渲染的文字</p>
<p v-if="false">这是一段不会被渲染的文字</p>
<!-- 在参数后面还可以增加修饰符 修饰符会为vue增加额外的功能 以下指令修饰符可以去除输入框首尾的空格-->
<input v-model.trim="content">
<br>
<button v-on:click="clickButton">换算</button>
<p style="color: #2a9fde">对于v-bind可以省略 直接使用:来绑定 对于v-on可以把v-on:缩写成@</p>
<p style="color: #2a9fde">本节小结:初步接触一些模板指令 v-on/v-if/v-html/v-bind/v-once</p>
</div>
<script>
// 定义一个组件命名为app
const App = {
// 定义组件中的数据
data(){
return{
number:0,
result:0,
insert_html_code:"<span style=\"font-family: 楷体, sans-serif; color: #00a1d6\">理论化学</span>",
id_1:'top_hello'
}
},
methods:{
clickButton() {
this.number = this.number + 1
this.result = this.number ** 2
}
}
}
// 把vue组件绑定到id=app的元素上
Vue.createApp(App).mount("#app")
</script>
</body>
</html>
