vue-模板應(yīng)用之條件指令
<!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來(lái)實(shí)現(xiàn)來(lái)動(dòng)態(tài)綁定便簽的樣式表 嘗試修改:-->
? ? ? ?<!-- <h1 v-bind:id="id_1">hello</h1>-->
? ? ? ?<p>模板數(shù)字: {{number}}</p>
? ? ? ?<!-- {{}}在插值時(shí)還可以直接使用js的表達(dá)式 嘗試修改:-->
? ? ? ?<!-- <p>模板數(shù)字: {{number ** 2}}</p>-->
? ? ? ?<p>模板結(jié)果: {{result}}</p>
? ? ? ?<!-- ?如果使用v-once指令那么一旦渲染則不再變化 ?嘗試修改:-->
? ? ? ?<!-- ?<p v-once>模板結(jié)果: {{result}}</p> ?-->
? ? ? ?<!-- ?對(duì)于html代碼的插值則需要使用v-html ?-->
? ? ? ?<p>html插值文字: <span v-html="insert_html_code"></span></p>
? ? ? ?<!-- ?v-if是條件渲染 只有其為布爾值true時(shí)才會(huì)被渲染-->
? ? ? ?<p v-if="true">這是一段會(huì)被渲染的文字</p>
? ? ? ?<p v-if="false">這是一段不會(huì)被渲染的文字</p>
? ? ? ?<!-- ?在參數(shù)后面還可以增加修飾符 修飾符會(huì)為vue增加額外的功能 以下指令修飾符可以去除輸入框首尾的空格-->
? ? ? ?<input v-model.trim="content">
? ? ? ?<br>
? ? ? ?<button v-on:click="clickButton">換算</button>
? ? ? ?<p style="color: #2a9fde">對(duì)于v-bind可以省略 直接使用:來(lái)綁定 對(duì)于v-on可以把v-on:縮寫成@</p>
? ? ? ?<p style="color: #2a9fde">本節(jié)小結(jié):初步接觸一些模板指令 v-on/v-if/v-html/v-bind/v-once</p>
? ?</div>
? ?<script>
? ? ? ?// 定義一個(gè)組件命名為app
? ? ? ?const App = {
? ? ? ? ? ?// 定義組件中的數(shù)據(jù)
? ? ? ? ? ?data(){
? ? ? ? ? ? ? ?return{
? ? ? ? ? ? ? ? ? ?number:0,
? ? ? ? ? ? ? ? ? ?result:0,
? ? ? ? ? ? ? ? ? ?insert_html_code:"<span style=\"font-family: 楷體, sans-serif; color: #00a1d6\">理論化學(xué)</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>
