❶ vue從後台獲取的數據有html標簽通過v-html渲染到頁面，然後怎麼給這裡面的html添加樣式
要輸入代碼。
html：
<templatev-for="(item,index)inquestionnaireList">
<divclass="questionnaire-section"@click="onSection(item.id)">
<divclass="title">{{item.title}}</div>
</div>
</template>
varapp=newVue({
el:'#app',
data:{
questionnaireList:[],//定義一個空數組
currentPage:1,//當前頁
},
//載入完後自動執行
mounted:function(){
varthat=this;
that.questionnaireData();//調用方法
},
methods:{
questionnaireData:function(){
varthat=this;
$.ajax({
url:url+"questionnaire",
type:"GET",
data:{
currPage:that.currentPage
},
success:function(res){
res.data.questions.map(function(item,index){
that.questionnaireList.push(item);
(1)vue接收動態腳本擴展閱讀：
一、在編輯器中創建一個web項目，抄並在目錄中創建一個新的靜態頁面buttonclick.html：
二、在title標簽中介紹准備好的vue.js庫文件。在這里，將JS文件放在JS目錄中，然後在body標記中插入一個div和四個按鈕，將click事件襲與Vue中的v-on標記綁定：
三、接下來，插入腳本標記，在標百記中寫入事件函數，在事件中傳遞參數，然後打開瀏覽器查看結果：
四、打開瀏覽器並單擊其中一度個按鈕以打開窗口返回的元素對象。以上是如何使用Vue獲取click事件元素。
❷ vue怎麼動態添加組件到頁面上
比如有這么個router需要跳轉
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
你的router-link可以這么寫
1
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
還可以用編程在代碼里寫，效果也一樣：
1
router.push({ name: 'user', params: { userId: 123 }})
具體的推薦你看下vue router的官網，裡面有詳細的說明和例子
❸ vue如何動態調用方法
通常我們會在組件里的 template 屬性定義模板，或者是在 *.vue 文件里的 template 標簽里寫模板。但是有時候會需要動態生成模板的需求，例如讓用戶自定義組件模板，或者設置組件的布局。
例如要做一個類 select 的組件，用戶傳入 options 數據，通過 value prop 獲取選中值，最基本的原型如下。
Vue.component('XSelect', {
template: `
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
<span v-text="option.label"></span>
</div>
</div>`,
props: ['value','options']
})
如果此時需要增加一個 API 支持讓用戶自定義 option 部分的模板。此處用 slot 並不能解決問題。
通過 $options.template 修改
通過列印組件對象可以獲得一個信息，在 $options 里定義了一個 template 屬性，寫在 template 標簽里的模板，最終編譯後也會在 $options.template 里。通過文檔的生命周期 可以得知，在 created 的時候， 實例已經結束解析選項， 但是還沒有開始 DOM 編譯 也就是說，如果用戶通過 prop 的數據我們可以獲得，但是模板其實還沒有渲染成 DOM。經過測試，在 created 修改 this.$options.template 是可以改變最終生成的 DOM 的，同時也能拿到 props 的內容。
那麼我們可以修改下代碼，使其支持自定義模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:'<span v-text="option.label"></span>'
}
],
created() {
varoptionTpl =this.template
this.$options.template =`
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
</div>
</div>`
}
})
用戶使用是就可以傳入模板了
<x-select
:value.sync="value"
template="<span>標簽: {{ option.label }}, 值: {{ option.value }}</span>"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
</x-select>
可能存在的問題
我們知道 Vue 在內部幫我們做了許多優化，但是在這里可能會由於某些優化導致動態拼接的模板無法渲染成功。例如這里我們不使用 v-for 而是手工遍歷 options 生成需要的 HTML
consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)
this.$options.template =`
<div class="select">
<input :value="value" readonly>
${tpl}
</div>`
這里會導致一個 BUG，如果一個頁面有多個 x-select 組件，並且 options 長度不一樣，會導致長的 options 的組件後面幾個選項渲染不出來。究其原因是 Vue 會幫我們緩存模板編譯結果。翻看代碼可以找到 vue/src/instance/internal/lifecycle.js 里有做優化，同時提供的 _linkerCachable 本意是給 內聯模板 使用。我們可以通過設置 this.$options._linkerCachable = false 達到我們的目的。
這樣我們就可以開發讓用戶自定義布局的組件了，用戶傳入布局參數，通過手工拼接模板，設置了 _linkerCachable = false 也不會被緩存。
通過 $options.partials 動態添加 partial
使用 partials 也能達到添加自定義模板的目的，但是通常的做法是要全局注冊 partial，這么做並不優雅。 vue-strap 就是這么做的。如果重名了會被覆蓋（初次渲染不會，但是數據更新重新渲染 DOM 時就會被覆蓋）。
通過文檔我們知道可以在組件內部通過 partials 屬性注冊局部的 partial，因此自然而然也可以在 this.$options.partials 去動態添加了。
❹ 怎麼把vue的動態數據在查看源代碼中展示
Chrome或同內核的瀏覽器，使用開發者工具(f12)->network可以看到ajax請求回來的數據
❺ vue 如何監聽事件動態傳至給子組件
點擊後defaultEcation的值明明改變了，但props傳給子組件卻watch不到
父組件
<choice :text="checkdata" ref="choice" @getchoice="onChoice" @cancel="showToggleCancel" :checkedValue="defaultEcation"></choice>computed: {
geitfasa () { document.addEventListener('tap', function (event) { var focusTargetDom = event.target if (focusTargetDom.tagName.toLowerCase() === 'input' && focusTargetDom.getAttribute('name') === 'checkdata') { this.defaultEcation = focusTargetDom.value console.log(this.defaultEcation)
}
}, true)
}
}
子組件
<input type="radio" :value="item.id" :id="`checkbox_${index}`" :name="item.radioName" v-model="checkedVal" @tap.stop="hideCheck"/>
<label :for="`checkbox_${index}`" :id="`check_${index}`">
{{item.name}}
</label>
props: {
text: {
type: Array, default: []
},
checkedValue: {
type: String, default: ''
}
}, data () { return {
checkedVal: ''
}
},
created () { this.checkedVal = this.checkedValue this.$watch('checkedValue', (newquery) => {
console.log(newquery)
})
}
❻ Vue動態生成的input怎麼實現數據雙向綁定
你可以用渲染的時候讓 h 這種動態生成的方法來加上this.my_variables ; 下面是例子
或者使用$refs,給你的input一個id，然後獲取到以後，用compute好的值給他賦值；
renderHeader: (h)=>{
return h('div',[
h('strong','序號'),
h('Icon',{
props:{
type: this.my_variables
},
style: {
marginLeft: '5px'
}
})
]);
},
我也是在學習，希望能有所幫助
❼ vue.js怎麼給帶children的元素動態賦值
你是想用children的欄位嗎，可以
leta=[{a:'dad',children:[{children:[]}]}];
res.data.forEach(element=>{
a.map((item)=>{
item.children=element
})
})
如果children多的話就遞歸
❽ vue中動態創建的元素怎樣綁定事件博客園
標簽綁定是綁定單個。動態綁定是批量。
標簽綁定不符合行為與結構分離的原則。
標簽綁定唯一的優點是一眼就能看出什麼元素綁定了事件。但現在藉助開發者工具，已經不叫事了。
❾ vue+echart開發統計圖 動態的數據怎麼載入過來
這個可以找web前端框架，很多框架都已將前台圖表的樣式和行為封裝好了。而後台只需傳輸json格式的數據，具體框架可以網路，很多的.
❿ Vue.js動態修改渲染值的問題。
你可以聲明一個變數tmp
<a v-for="(index, item) in tmp" href="{{item.href}}" class="swiper-slide item">{{ index }}</a>
然後在點擊事件中改變tmp為a或b。