整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
-html的作用是設置和修改innerHTML。
下面來看看示例程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-html</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test1">
<div v-html="text1"></div>
<input type="button" value="修改內部樣式" @click="change()">
</div>
<script>
var vm1=new Vue({
el:'#test1',
data:{
text1:"<div id=\"test\"><div>Name is :{{name}}</div><div>Local Name is: {{jifukui[0].name}}</div></div>"
},
methods:{
change:function(){
this.text1="<div id=\"test\"><div>name is :{{name}}</div><div>Local name is: {{jifukui[0].name}}</div></div>"
}
}
});
var vm = new Vue({
el: '#test',
data: {
name:"hahahhaha" ,
jifukui:[
{
name:"jifukui"
}
]
},
});
</script>
</body>
</html>
（1）程序中包含兩個vue示例vm1掛載在test1上，text1包含一個<div>的標簽用于插入v-html，還有一個<input>標簽用于設置改變<div>標簽中的v-html的內容。
（2）第二個vue實例掛載在test上進行插值。
（1）默認樣式
可以明顯的看到vm1實例被渲染且vm實例也被渲染，從紅色方框中的內容可以看到就是v-html的值text1的值。
（2）點擊后的樣式
點擊后可以看到text1的值發生了改變，但是其中的關于vm實例中的內容沒有被綁定替換。所以一般使用v-html進行設置和修改innerHTML的值，所以盡量不要使用v-html組合模板。
最近在項目上有個移動端（uni-app）的需求，就是要在移動端APP上的vue頁面中通過web-view組件來調用html頁面，并且要實現在html頁面中可以點擊一個元素來調用vue頁面中uni的API（掃碼接口），同時也可以在vue頁面中也可以調用html頁面中的js函數并進行傳參。
1. HBuilderX版本：2.8.11.20200907
2. V3編譯器
引用依賴的文件
在 web-view 加載的 HTML 中調用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>注意：這些 JS 文件是在 web-view 加載的那個 HTML 文件中引用的，而不是 uni-app 項目中的文件。
監聽 web-view 的 message 事件
監聽 web-view 組件的 message 事件，然后在事件回調的 event.detail.data 中接收傳遞過來的消息。
<template>
<view>
<web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
methods: {
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
}
}
}
</script>調用的時機
在引入上面的依賴文件后，需要在HTML中監聽UniAppJSBridgeReady，事件觸發后，
才能安全調用uni的API。
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script>
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
if(action === 'navigateTo') {
uni.postMessage({
data: {
action: 'postMessage'
}
});
}
}
});
</script>上面代碼的意思就是在html頁面中點擊按鈕列表中的某個按鈕，
觸發了uni.postMessage接口，進而調用了vue頁面methods中的handleMessage方法，
并將參數data傳給了vue頁面。
在vue頁面中調用html頁面的js函數
示例代碼：
var currentWebview = this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");其中的htmljsfuc就是要在html頁面中定義的js函數。
完整代碼示例：
1）定義n初始值0,
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
"n": 0
},
methods: {},
computed: {},
})
</script>（2）定義自加按鈕，展示n的值，和判斷結果
<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3><h1 style="color: red">使用v-show進行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進行條件渲染</h3><h1 style="color: red">使用v-if進行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進行條件渲染</h3><h1 style="color: red">使用if else-if else進行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進行條件渲染 if else-if - v-else</h3><h1 style="color: red">使用template v-if進行條件渲染 </h1>
<template v-if="n == 1">
<h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
</template>執行結果
筆記分享
<pre v-show="true">
條件渲染：
1、v-if
寫法：
（1）v-if = "表達式"
（2）v-else-if = "表達式"
（3）v-else = "表達式"
適用于：切換頻率較低的場景
特點：不展示的DOM元素將被直接刪除
注意：v-if和v-else-if、v-else一起使用的時候，要求結構不可以被打斷
2、v-show
寫法：v-show = "表達式"
適用于：切換頻率較高的場景
特點：不展示的DOM元素未被移除，使用樣式進行隱藏
3、備注
使用v-if時，元素可能無法獲取到，使用v-show是可獲取到的
4、使用template v-if
寫的時候template對內容進行了包裹，
等最終頁面渲染的時候，將把template標簽刪掉，
這也就是說不破壞原來的樣式。
但是template只能配合v-if進行使用。
</pre>源碼截圖
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
